我正在尝试使用click选项来调用URL但是获取Uncaught SyntaxError：意外的标识符，你们可以告诉这段代码有什么问题吗？
看起来我没有将myChartG1.click逻辑放在正确的块上，我从堆栈网站上的一个帖子中获取了这个代码，但它似乎不起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<title>My Chart.js Chart</title>
<style>
div.container2 {
width: 80%;
}
</head><body>
</style>
<div class="container2">
<canvas id="myChartG1"></canvas>
</div>
<input type="hidden" name="USERJSINJECTION1" value="" />
<canvas id="myChartG1" width="400" height="100"></canvas>
<script>
console.log(Chart.defaults.global)
var obj = JSON.parse('%Bind(:1)');
//
//
//document.getElementById("demo").innerHTML = obj.Account.JAN.FY + "," + obj.Account.JAN.Month;
var ctx = document.getElementById("myChartG1").getContext('2d');
var myChartG1 = new Chart(ctx, {
type: 'bar',
data: {
labels: [obj.Account.JAN.Month, obj.Account.FEB.Month, obj.Account.MAR.Month, obj.Account.APR.Month, obj.Account.MAY.Month, obj.Account.JUN.Month, obj.Account.JUL.Month, obj.Account.AUG.Month, obj.Account.SEP.Month, obj.Account.OCT.Month, obj.Account.NOV.Month, obj.Account.DEC.Month],
datasets: [{
label: 'Monthly Budget',
data: [obj.Account.JAN.MonthlyBudget,
obj.Account.FEB.MonthlyBudget,
obj.Account.MAR.MonthlyBudget,
obj.Account.APR.MonthlyBudget,
obj.Account.MAY.MonthlyBudget,
obj.Account.JUN.MonthlyBudget,
obj.Account.JUL.MonthlyBudget,
obj.Account.AUG.MonthlyBudget,
obj.Account.SEP.MonthlyBudget,
obj.Account.OCT.MonthlyBudget,
obj.Account.NOV.MonthlyBudget,
obj.Account.DEC.MonthlyBudget
],
backgroundColor: [
'rgba(255, 99, 132, 0.4)',
'rgba(54, 162, 235, 0.4)',
'rgba(255, 206, 86, 0.4)',
'rgba(75, 192, 192, 0.4)',
'rgba(153, 102, 255, 0.4)',
'rgba(255, 159, 64, 0.4)',
'rgba(255, 99, 132, 0.4)',
'rgba(255, 255, 0, 0.4)',
'rgba(255, 102, 0, 0.4)',
'rgba(0, 255, 153, 0.4)',
'rgba(153, 204, 0, 0.4)',
'rgba(255, 102, 255,0.4)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(255, 255, 0, 1)',
'rgba(255, 102, 0, 1)',
'rgba(0, 255, 153, 1)',
'rgba(153, 204, 0, 1)',
'rgba(255, 102, 255,1)'
],
hoverBackgroundColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(255, 255, 0, 1)',
'rgba(255, 102, 0, 1)',
'rgba(0, 255, 153, 1)',
'rgba(153, 204, 0, 1)',
'rgba(255, 102, 255,1)'
],
borderWidth: 1
},
{
label: 'Monthly Posted',
data: [obj.Account.JAN.MonthlyPosted,
obj.Account.FEB.MonthlyPosted,
obj.Account.MAR.MonthlyPosted,
obj.Account.APR.MonthlyPosted,
obj.Account.MAY.MonthlyPosted,
obj.Account.JUN.MonthlyPosted,
obj.Account.JUL.MonthlyPosted,
obj.Account.AUG.MonthlyPosted,
obj.Account.SEP.MonthlyPosted,
obj.Account.OCT.MonthlyPosted,
obj.Account.NOV.MonthlyPosted,
obj.Account.DEC.MonthlyPosted
],
backgroundColor: [
'rgba(255, 99, 132, 0.4)',
'rgba(54, 162, 235, 0.4)',
'rgba(255, 206, 86, 0.4)',
'rgba(75, 192, 192, 0.4)',
'rgba(153, 102, 255, 0.4)',
'rgba(255, 159, 64, 0.4)',
'rgba(255, 99, 132, 0.4)',
'rgba(255, 255, 0, 0.4)',
'rgba(255, 102, 0, 0.4)',
'rgba(0, 255, 153, 0.4)',
'rgba(153, 204, 0, 0.4)',
'rgba(255, 102, 255,0.4)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(255, 255, 0, 1)',
'rgba(255, 102, 0, 1)',
'rgba(0, 255, 153, 1)',
'rgba(153, 204, 0, 1)',
'rgba(255, 102, 255,1)'
],
hoverBackgroundColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(255, 255, 0, 1)',
'rgba(255, 102, 0, 1)',
'rgba(0, 255, 153, 1)',
'rgba(153, 204, 0, 1)',
'rgba(255, 102, 255,1)'
],
borderWidth: 1
},
{
label: 'Monthly Variance',
data: [obj.Account.JAN.MonthlyVariance,
obj.Account.FEB.MonthlyVariance,
obj.Account.MAR.MonthlyVariance,
obj.Account.APR.MonthlyVariance,
obj.Account.MAY.MonthlyVariance,
obj.Account.JUN.MonthlyVariance,
obj.Account.JUL.MonthlyVariance,
obj.Account.AUG.MonthlyVariance,
obj.Account.SEP.MonthlyVariance,
obj.Account.OCT.MonthlyVariance,
obj.Account.NOV.MonthlyVariance,
obj.Account.DEC.MonthlyVariance
],
backgroundColor: [
'rgba(255, 99, 132, 0.4)',
'rgba(54, 162, 235, 0.4)',
'rgba(255, 206, 86, 0.4)',
'rgba(75, 192, 192, 0.4)',
'rgba(153, 102, 255, 0.4)',
'rgba(255, 159, 64, 0.4)',
'rgba(255, 99, 132, 0.4)',
'rgba(255, 255, 0, 0.4)',
'rgba(255, 102, 0, 0.4)',
'rgba(0, 255, 153, 0.4)',
'rgba(153, 204, 0, 0.4)',
'rgba(255, 102, 255,0.4)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(255, 255, 0, 1)',
'rgba(255, 102, 0, 1)',
'rgba(0, 255, 153, 1)',
'rgba(153, 204, 0, 1)',
'rgba(255, 102, 255,1)'
],
hoverBackgroundColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(255, 255, 0, 1)',
'rgba(255, 102, 0, 1)',
'rgba(0, 255, 153, 1)',
'rgba(153, 204, 0, 1)',
'rgba(255, 102, 255,1)'
],
borderWidth: 1
}, {
label: 'YTD Budget',
data: [obj.Account.JAN.YTDBudget,
obj.Account.FEB.YTDBudget,
obj.Account.MAR.YTDBudget,
obj.Account.APR.YTDBudget,
obj.Account.MAY.YTDBudget,
obj.Account.JUN.YTDBudget,
obj.Account.JUL.YTDBudget,
obj.Account.AUG.YTDBudget,
obj.Account.SEP.YTDBudget,
obj.Account.OCT.YTDBudget,
obj.Account.NOV.YTDBudget,
obj.Account.DEC.YTDBudget
],
backgroundColor: [
'rgba(255, 99, 132, 0.4)',
'rgba(54, 162, 235, 0.4)',
'rgba(255, 206, 86, 0.4)',
'rgba(75, 192, 192, 0.4)',
'rgba(153, 102, 255, 0.4)',
'rgba(255, 159, 64, 0.4)',
'rgba(255, 99, 132, 0.4)',
'rgba(255, 255, 0, 0.4)',
'rgba(255, 102, 0, 0.4)',
'rgba(0, 255, 153, 0.4)',
'rgba(153, 204, 0, 0.4)',
'rgba(255, 102, 255,0.4)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(255, 255, 0, 1)',
'rgba(255, 102, 0, 1)',
'rgba(0, 255, 153, 1)',
'rgba(153, 204, 0, 1)',
'rgba(255, 102, 255,1)'
],
hoverBackgroundColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(255, 255, 0, 1)',
'rgba(255, 102, 0, 1)',
'rgba(0, 255, 153, 1)',
'rgba(153, 204, 0, 1)',
'rgba(255, 102, 255,1)'
],
borderWidth: 1
},
{
label: 'YTD Posted',
data: [obj.Account.JAN.YTDPosted,
obj.Account.FEB.YTDPosted,
obj.Account.MAR.YTDPosted,
obj.Account.APR.YTDPosted,
obj.Account.MAY.YTDPosted,
obj.Account.JUN.YTDPosted,
obj.Account.JUL.YTDPosted,
obj.Account.AUG.YTDPosted,
obj.Account.SEP.YTDPosted,
obj.Account.OCT.YTDPosted,
obj.Account.NOV.YTDPosted,
obj.Account.DEC.YTDPosted
],
backgroundColor: [
'rgba(255, 99, 132, 0.4)',
'rgba(54, 162, 235, 0.4)',
'rgba(255, 206, 86, 0.4)',
'rgba(75, 192, 192, 0.4)',
'rgba(153, 102, 255, 0.4)',
'rgba(255, 159, 64, 0.4)',
'rgba(255, 99, 132, 0.4)',
'rgba(255, 255, 0, 0.4)',
'rgba(255, 102, 0, 0.4)',
'rgba(0, 255, 153, 0.4)',
'rgba(153, 204, 0, 0.4)',
'rgba(255, 102, 255,0.4)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(255, 255, 0, 1)',
'rgba(255, 102, 0, 1)',
'rgba(0, 255, 153, 1)',
'rgba(153, 204, 0, 1)',
'rgba(255, 102, 255,1)'
],
hoverBackgroundColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(255, 255, 0, 1)',
'rgba(255, 102, 0, 1)',
'rgba(0, 255, 153, 1)',
'rgba(153, 204, 0, 1)',
'rgba(255, 102, 255,1)'
],
borderWidth: 1
},
{
label: 'YTD Variance',
data: [obj.Account.JAN.YTDVariance,
obj.Account.FEB.YTDVariance,
obj.Account.MAR.YTDVariance,
obj.Account.APR.YTDVariance,
obj.Account.MAY.YTDVariance,
obj.Account.JUN.YTDVariance,
obj.Account.JUL.YTDVariance,
obj.Account.AUG.YTDVariance,
obj.Account.SEP.YTDVariance,
obj.Account.OCT.YTDVariance,
obj.Account.NOV.YTDVariance,
obj.Account.DEC.YTDVariance
],
backgroundColor: [
'rgba(255, 99, 132, 0.4)',
'rgba(54, 162, 235, 0.4)',
'rgba(255, 206, 86, 0.4)',
'rgba(75, 192, 192, 0.4)',
'rgba(153, 102, 255, 0.4)',
'rgba(255, 159, 64, 0.4)',
'rgba(255, 99, 132, 0.4)',
'rgba(255, 255, 0, 0.4)',
'rgba(255, 102, 0, 0.4)',
'rgba(0, 255, 153, 0.4)',
'rgba(153, 204, 0, 0.4)',
'rgba(255, 102, 255,0.4)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(255, 255, 0, 1)',
'rgba(255, 102, 0, 1)',
'rgba(0, 255, 153, 1)',
'rgba(153, 204, 0, 1)',
'rgba(255, 102, 255,1)'
],
hoverBackgroundColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(255, 255, 0, 1)',
'rgba(255, 102, 0, 1)',
'rgba(0, 255, 153, 1)',
'rgba(153, 204, 0, 1)',
'rgba(255, 102, 255,1)'
],
borderWidth: 1
},
{
label: 'Annual Variance',
data: [obj.Account.JAN.AnnualVariance,
obj.Account.FEB.AnnualVariance,
obj.Account.MAR.AnnualVariance,
obj.Account.APR.AnnualVariance,
obj.Account.MAY.AnnualVariance,
obj.Account.JUN.AnnualVariance,
obj.Account.JUL.AnnualVariance,
obj.Account.AUG.AnnualVariance,
obj.Account.SEP.AnnualVariance,
obj.Account.OCT.AnnualVariance,
obj.Account.NOV.AnnualVariance,
obj.Account.DEC.AnnualVariance
],
backgroundColor: [
'rgba(255, 99, 132, 0.4)',
'rgba(54, 162, 235, 0.4)',
'rgba(255, 206, 86, 0.4)',
'rgba(75, 192, 192, 0.4)',
'rgba(153, 102, 255, 0.4)',
'rgba(255, 159, 64, 0.4)',
'rgba(255, 99, 132, 0.4)',
'rgba(255, 255, 0, 0.4)',
'rgba(255, 102, 0, 0.4)',
'rgba(0, 255, 153, 0.4)',
'rgba(153, 204, 0, 0.4)',
'rgba(255, 102, 255,0.4)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(255, 255, 0, 1)',
'rgba(255, 102, 0, 1)',
'rgba(0, 255, 153, 1)',
'rgba(153, 204, 0, 1)',
'rgba(255, 102, 255,1)'
],
hoverBackgroundColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(255, 255, 0, 1)',
'rgba(255, 102, 0, 1)',
'rgba(0, 255, 153, 1)',
'rgba(153, 204, 0, 1)',
'rgba(255, 102, 255,1)'
],
borderWidth: 1
}
]
},
options: {
layout: {
padding: {
left: 50,
right: 20,
top: 0,
bottom: 0
}
},
//animation: false,
//events: ['click'],
legend: {
display: true,
position: "right",
// labels: { fontColor: 'rgb(0, 255, 153)'} change legend font color
},
maintainAspectRatio: true,
responsive: true,
responsiveAnimationDuration: 1500,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
if (parseInt(value) >= 1000) {
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else {
return '$' + value;
}
}
}
}]
},
tootltips: {
tooltipTemplate: "<%= addCommas(value) %>"
}
}
$("#myChartG1").click(
function(evt) {
var activePoints = myChartG1.getSegmentsAtEvent(evt);
var url = "http://example.com/?label=" + activePoints[0].label + "&value=" + activePoints[0].value;
alert(url);
}
);
});
</script>
</body>
</html>