stackoom
  简体   繁体   中英

Chart JS onclick doesn't work

 原文  2017-11-17 15:59:55  0   1    javascript/ react-chartjs

Question

Can someone tell me what I'm doing wrong here, chart renders but when I click the bar I get error in console:

Uncaught TypeError: ComboChart.getElementsAtEvent is not a function at HTMLCanvasElement.document.getElementById.onclick.

I verified a couple of other posts on stack but don't seem to get an idea, I'm fairly new to javascript, please help me understand why this wouldn't work.

Thanks a lot! 

 <head> <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"> <style> .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-auto-rows: minmax(100px, auto); grid-row-gap: 1em; grid-column-gap: 1em; justify-items: stretch; align-items: stretch; grid-auto-flow: column; } .wrapper>div { //background: #eee; padding: 1em; } .wrapper>div:nth-child(odd) { //background: #ddd; } .ComboChart { /*justify-self:end;*/ grid-column: 1/9; grid-row: 1/5; } .container { /*align-self:end;*/ grid-column: 7/9; grid-row: 2; } #myProgress { width: 100%; background-color: #ddd; } #myBar { width: N/A%; height: 30px; background-color: ; text-align: center; line-height: 30px; color: white; } .Top5 { /*align-self:end;*/ grid-column: 1/3; grid-row: 3; } </style> </head> <body> <div class="wrapper"> <div class="ComboChart"> <canvas id="ComboChart"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script> <script> console.log(Chart.defaults.global) var obj = JSON.parse('{"Account":{"JAN":{"Month":"JAN","MonthlyBudget":323342.6200000000,"MonthlyPosted":207198.1700000000,"MonthlyVariance":116144.4500000000,"YTDBudget":323342.6200000000,"YTDPosted":207198.1700000000,"YTDVariance":116144.4500000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1935521.880000000,"AnnualVariance":1944037.460000000},"FEB":{"Month":"FEB","MonthlyBudget":303967.7900000000,"MonthlyPosted":333011.4200000000,"MonthlyVariance":-29043.63000000000,"YTDBudget":627310.4100000000,"YTDPosted":540092.5900000000,"YTDVariance":87217.82000000002,"AnnualBudget":3879559.340000000,"AnnualPosted":1935613.380000000,"AnnualVariance":1943945.960000000},"MAR":{"Month":"MAR","MonthlyBudget":325389.6400000000,"MonthlyPosted":223266.5100000000,"MonthlyVariance":102123.1300000000,"YTDBudget":952700.0500000000,"YTDPosted":761933.8800000000,"YTDVariance":190766.1700000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1929419.560000000,"AnnualVariance":1950139.780000000},"APR":{"Month":"APR","MonthlyBudget":321608.2000000000,"MonthlyPosted":268868.0300000001,"MonthlyVariance":52740.17000000000,"YTDBudget":1274308.250000000,"YTDPosted":1032227.130000000,"YTDVariance":242081.1200000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1935613.380000000,"AnnualVariance":1943945.960000000},"MAY":{"Month":"MAY","MonthlyBudget":328223.9600000000,"MonthlyPosted":267917.2600000000,"MonthlyVariance":60306.70000000000,"YTDBudget":1602532.210000000,"YTDPosted":1300144.390000000,"YTDVariance":302387.8200000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1937114.100000000,"AnnualVariance":1942445.240000000},"JUN":{"Month":"JUN","MonthlyBudget":321608.2000000000,"MonthlyPosted":256167.9500000000,"MonthlyVariance":65440.25000000000,"YTDBudget":1924140.410000000,"YTDPosted":1555711.980000000,"YTDVariance":368428.4300000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1935613.380000000,"AnnualVariance":1943945.960000000},"JUL":{"Month":"JUL","MonthlyBudget":328223.9600000000,"MonthlyPosted":268862.8300000000,"MonthlyVariance":59361.13000000000,"YTDBudget":2252364.370000000,"YTDPosted":1821052.940000000,"YTDVariance":431311.4300000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1930920.280000000,"AnnualVariance":1948639.060000000},"AUG":{"Month":"AUG","MonthlyBudget":328223.9600000000,"MonthlyPosted":250416.9300000000,"MonthlyVariance":77807.03000000000,"YTDBudget":2580588.330000000,"YTDPosted":2075383.600000000,"YTDVariance":505204.7300000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1936905.600000000,"AnnualVariance":1942653.740000000},"SEP":{"Month":"SEP","MonthlyBudget":313274.8700000000,"MonthlyPosted":-76566.64000000000,"MonthlyVariance":389841.5100000000,"YTDBudget":2827196.560000000,"YTDPosted":1961361.240000000,"YTDVariance":865835.3200000000,"AnnualBudget":3779559.380000000,"AnnualPosted":1900049.880000000,"AnnualVariance":1879509.500000000},"OCT":{"Month":"OCT","MonthlyBudget":0,"MonthlyPosted":-61311.36000000000,"MonthlyVariance":61311.36000000000,"YTDBudget":1764331.340000000,"YTDPosted":1231178.370000000,"YTDVariance":533152.9700000000,"AnnualBudget":2362354.180000000,"AnnualPosted":1231178.370000000,"AnnualVariance":1131175.810000000}}}'); if (obj.Account.NOV != null) { novMonth = obj.Account.NOV.Month; novAnnualPosted = obj.Account.NOV.AnnualPosted; novAnnualVariance = obj.Account.NOV.AnnualVariance; } else { novMonth = 'NOV'; novAnnualPosted = 0; novAnnualVariance = 0; } if (obj.Account.DEC != null) { decMonth = obj.Account.DEC.Month; decAnnualPosted = obj.Account.DEC.AnnualPosted; decAnnualVariance = obj.Account.DEC.AnnualVariance; } else { decMonth = 'DEC'; decAnnualPosted = 0; decAnnualVariance = 0; } var comma = ","; var month = novMonth.concat(decMonth); var randomColorFactor = function() { return Math.round(Math.random() * 255); }; var randomColor = function(opacity) { return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')'; }; new Chart(document.getElementById("ComboChart"), { 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, month], datasets: [{ label: "Annual Posted", type: "bar", borderColor: 'rgb(115, 115, 115)', backgroundColor: 'rgb(115, 115, 115)', data: [obj.Account.JAN.AnnualPosted, obj.Account.FEB.AnnualPosted, obj.Account.MAR.AnnualPosted, obj.Account.APR.AnnualPosted, obj.Account.MAY.AnnualPosted, obj.Account.JUN.AnnualPosted, obj.Account.JUL.AnnualPosted, obj.Account.AUG.AnnualPosted, obj.Account.SEP.AnnualPosted, obj.Account.OCT.AnnualPosted, novAnnualPosted, decAnnualPosted ], fill: false }, { label: "Annual Variance", type: "bar", borderColor: 'rgb(210, 11, 11)', backgroundColor: 'rgb(210, 11, 11)', 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, novAnnualVariance, decAnnualVariance ], fill: false } ] }, options: { title: { display: true, text: 'YTD Budget vs Posted', position: 'right' }, legend: { display: true, position: 'bottom' }, maintainAspectRatio: false, responsive: true, responsiveAnimationDuration: 1500, scales: { xAxes: [{ gridLines: { display: false } }], yAxes: [{ gridLines: { display: false }, ticks: { beginAtZero: true, callback: function(value, index, values) { if (parseInt(value) >= 1000) { return '$' + value.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ","); } else { return '$' + value; } } } }] }, } }); document.getElementById("ComboChart").onclick = function(evt) { var activePoints = ComboChart.getElementsAtEvent(evt); var firstPoint = activePoints[0]; var label = ComboChart.data.labels[firstPoint._index]; var value = ComboChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index]; if (firstPoint !== undefined) alert(label + ": " + value); }; </script> </div> </div> </body> <body>

1 answers

solution1
 0 ACCPTED  2017-11-17 16:25:33

You will have to instantiate ComboChart in your code.

When you create the chart using new Chart(document.getElementById("ComboChart")) , you will have to assign the result to a variable called ComboChart: var ComboChart = new Chart(document.getElementById("ComboChart"))

That way, you can reference it from the event handler. 

 <head> <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"> <style> .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-auto-rows: minmax(100px, auto); grid-row-gap: 1em; grid-column-gap: 1em; justify-items: stretch; align-items: stretch; grid-auto-flow: column; } .wrapper>div { //background: #eee; padding: 1em; } .wrapper>div:nth-child(odd) { //background: #ddd; } .ComboChart { /*justify-self:end;*/ grid-column: 1/9; grid-row: 1/5; } .container { /*align-self:end;*/ grid-column: 7/9; grid-row: 2; } #myProgress { width: 100%; background-color: #ddd; } #myBar { width: N/A%; height: 30px; background-color: ; text-align: center; line-height: 30px; color: white; } .Top5 { /*align-self:end;*/ grid-column: 1/3; grid-row: 3; } </style> </head> <body> <div class="wrapper"> <div class="ComboChart"> <canvas id="ComboChart"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script> <script> console.log(Chart.defaults.global) var obj = JSON.parse('{"Account":{"JAN":{"Month":"JAN","MonthlyBudget":323342.6200000000,"MonthlyPosted":207198.1700000000,"MonthlyVariance":116144.4500000000,"YTDBudget":323342.6200000000,"YTDPosted":207198.1700000000,"YTDVariance":116144.4500000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1935521.880000000,"AnnualVariance":1944037.460000000},"FEB":{"Month":"FEB","MonthlyBudget":303967.7900000000,"MonthlyPosted":333011.4200000000,"MonthlyVariance":-29043.63000000000,"YTDBudget":627310.4100000000,"YTDPosted":540092.5900000000,"YTDVariance":87217.82000000002,"AnnualBudget":3879559.340000000,"AnnualPosted":1935613.380000000,"AnnualVariance":1943945.960000000},"MAR":{"Month":"MAR","MonthlyBudget":325389.6400000000,"MonthlyPosted":223266.5100000000,"MonthlyVariance":102123.1300000000,"YTDBudget":952700.0500000000,"YTDPosted":761933.8800000000,"YTDVariance":190766.1700000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1929419.560000000,"AnnualVariance":1950139.780000000},"APR":{"Month":"APR","MonthlyBudget":321608.2000000000,"MonthlyPosted":268868.0300000001,"MonthlyVariance":52740.17000000000,"YTDBudget":1274308.250000000,"YTDPosted":1032227.130000000,"YTDVariance":242081.1200000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1935613.380000000,"AnnualVariance":1943945.960000000},"MAY":{"Month":"MAY","MonthlyBudget":328223.9600000000,"MonthlyPosted":267917.2600000000,"MonthlyVariance":60306.70000000000,"YTDBudget":1602532.210000000,"YTDPosted":1300144.390000000,"YTDVariance":302387.8200000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1937114.100000000,"AnnualVariance":1942445.240000000},"JUN":{"Month":"JUN","MonthlyBudget":321608.2000000000,"MonthlyPosted":256167.9500000000,"MonthlyVariance":65440.25000000000,"YTDBudget":1924140.410000000,"YTDPosted":1555711.980000000,"YTDVariance":368428.4300000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1935613.380000000,"AnnualVariance":1943945.960000000},"JUL":{"Month":"JUL","MonthlyBudget":328223.9600000000,"MonthlyPosted":268862.8300000000,"MonthlyVariance":59361.13000000000,"YTDBudget":2252364.370000000,"YTDPosted":1821052.940000000,"YTDVariance":431311.4300000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1930920.280000000,"AnnualVariance":1948639.060000000},"AUG":{"Month":"AUG","MonthlyBudget":328223.9600000000,"MonthlyPosted":250416.9300000000,"MonthlyVariance":77807.03000000000,"YTDBudget":2580588.330000000,"YTDPosted":2075383.600000000,"YTDVariance":505204.7300000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1936905.600000000,"AnnualVariance":1942653.740000000},"SEP":{"Month":"SEP","MonthlyBudget":313274.8700000000,"MonthlyPosted":-76566.64000000000,"MonthlyVariance":389841.5100000000,"YTDBudget":2827196.560000000,"YTDPosted":1961361.240000000,"YTDVariance":865835.3200000000,"AnnualBudget":3779559.380000000,"AnnualPosted":1900049.880000000,"AnnualVariance":1879509.500000000},"OCT":{"Month":"OCT","MonthlyBudget":0,"MonthlyPosted":-61311.36000000000,"MonthlyVariance":61311.36000000000,"YTDBudget":1764331.340000000,"YTDPosted":1231178.370000000,"YTDVariance":533152.9700000000,"AnnualBudget":2362354.180000000,"AnnualPosted":1231178.370000000,"AnnualVariance":1131175.810000000}}}'); if (obj.Account.NOV != null) { novMonth = obj.Account.NOV.Month; novAnnualPosted = obj.Account.NOV.AnnualPosted; novAnnualVariance = obj.Account.NOV.AnnualVariance; } else { novMonth = 'NOV'; novAnnualPosted = 0; novAnnualVariance = 0; } if (obj.Account.DEC != null) { decMonth = obj.Account.DEC.Month; decAnnualPosted = obj.Account.DEC.AnnualPosted; decAnnualVariance = obj.Account.DEC.AnnualVariance; } else { decMonth = 'DEC'; decAnnualPosted = 0; decAnnualVariance = 0; } var comma = ","; var month = novMonth.concat(decMonth); var randomColorFactor = function() { return Math.round(Math.random() * 255); }; var randomColor = function(opacity) { return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')'; }; var ComboChart = new Chart(document.getElementById("ComboChart"), { 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, month], datasets: [{ label: "Annual Posted", type: "bar", borderColor: 'rgb(115, 115, 115)', backgroundColor: 'rgb(115, 115, 115)', data: [obj.Account.JAN.AnnualPosted, obj.Account.FEB.AnnualPosted, obj.Account.MAR.AnnualPosted, obj.Account.APR.AnnualPosted, obj.Account.MAY.AnnualPosted, obj.Account.JUN.AnnualPosted, obj.Account.JUL.AnnualPosted, obj.Account.AUG.AnnualPosted, obj.Account.SEP.AnnualPosted, obj.Account.OCT.AnnualPosted, novAnnualPosted, decAnnualPosted ], fill: false }, { label: "Annual Variance", type: "bar", borderColor: 'rgb(210, 11, 11)', backgroundColor: 'rgb(210, 11, 11)', 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, novAnnualVariance, decAnnualVariance ], fill: false } ] }, options: { title: { display: true, text: 'YTD Budget vs Posted', position: 'right' }, legend: { display: true, position: 'bottom' }, maintainAspectRatio: false, responsive: true, responsiveAnimationDuration: 1500, scales: { xAxes: [{ gridLines: { display: false } }], yAxes: [{ gridLines: { display: false }, ticks: { beginAtZero: true, callback: function(value, index, values) { if (parseInt(value) >= 1000) { return '$' + value.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ","); } else { return '$' + value; } } } }] }, } }); document.getElementById("ComboChart").onclick = function(evt) { var activePoints = ComboChart.getElementsAtEvent(evt); var firstPoint = activePoints[0]; var label = ComboChart.data.labels[firstPoint._index]; var value = ComboChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index]; if (firstPoint !== undefined) alert(label + ": " + value); }; </script> </div> </div> </body> <body>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Pure Js onclick element doesn't work React JS onClick() Sometimes doesn't work Chart.js beginAtZero doesn't work Chart.js onAnimationComplete doesn't work onclick doesn't work JS onclick doesn't work with external js file Line chart doesn't work with type time chart.js js onclick event doesn't work on td element Javascript `onclick` doesn't work in separate JS file onclick event doesn't work in vanilla.js using vue
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM