Chart JS onclick不起作用

时间:2017-11-17 15:59:56

标签: javascript react-chartjs

有人可以告诉我这里我做错了什么,图表呈现但是当我点击栏时我在控制台出错:

未捕获的TypeError:ComboChart.getElementsAtEvent不是函数     在HTMLCanvasElement.document.getElementById.onclick。

我在堆栈上验证了其他一些帖子,但似乎没有想到,我对javascript很新,请帮助我理解为什么这不起作用。

非常感谢!

<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 个答案:

答案 0 :(得分:0)

您必须在代码中实例化ComboChart。

使用new Chart(document.getElementById("ComboChart"))创建图表时,您必须将结果分配给名为ComboChart的变量:var ComboChart = new Chart(document.getElementById("ComboChart"))

这样,您可以从事件处理程序中引用它。

&#13;
&#13;
<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>
&#13;
&#13;
&#13;