开发者问题收集

Chart.js 控制台 JS 错误，同时销毁点击事件上的图表

2021-07-13
1081
javascript chart.js chartjs-2.6.0 chart.js3 jscharts

在第一个图表“config.categoriesChart”的条形图单击事件上，出现控制台错误“ chart.js:10403 Uncaught TypeError: Cannot read property 'handleEvent' of undefined ” 在此处输入图片描述 ，显示为 chart.legend.handleEvent(args.event);

问题发生在第一个图表的条形图单击事件上销毁第一个图表之后。

但如果我使用 $('#how_i_spend_canvas').replaceWith($('')); 它可以正常工作而无需销毁图表。 在此处输入图片描述

请告诉我问题是什么？

document.ready 中的所有代码 

let Chart = require('chart.js');/
let ChartDataLabels = require('chartjs-plugin-datalabels');
let config = window.MvpFE.globalConfiguration.howISpend; 
let dataChart = window.dataHowISpendCharts;
   let labels = dataChart.howISpendDataCatgories.map(function (e) {
    return e.label;
});

let data = dataChart.howISpendDataCatgories.map(function (e) {
    return e.data;
});

//Chart Axis's
let scales = {
    x: {
        ticks: {
            font: {
                size: config.size,
            },
            color: config.dataLabelsColor,
        },
    },
    y: {
        display: false,
    }
};
//Chart legend
let plugins = {

    legend: {
        display: false,
    },
    tooltip: {
        enabled: true,
    },

};
//Chart Data Labels
let dataLabels = {
    color: config.dataLabelsColor,
    anchor: 'end',
    align: 'top',
    offset: 0,
    formatter: function (value) {
        //Include a dollar sign 
        return '$' + value.toLocaleString();
    },
};
//chart data 
let howISpendChartdata = {
    labels: labels,
    datasets: [{
        data: data,
        backgroundColor: config.catogriesBackgroundColor,
        borderColor: config.catogriesBorderColor,
        hoverBackgroundColor: config.unSelectedColor,
        hoverBorderColor: config.unSelectedColor,
        borderWidth: config.barWidth,
        borderRadius: config.barRadius,
        borderSkipped: 'false',
        datalabels: dataLabels
    }]
}

// Category heading label text will be from json data
let categoryLabel = "";
//Array to store the bar background colors.
const barColors = [];

//Code to draw Chart 
var ctx = document.getElementById('how_i_spend_canvas').getContext('2d');
config.categoriesChart = new Chart(ctx, {
    type: 'bar',
    data: howISpendChartdata,
    // Chart pulgins & Options
    plugins: [ChartDataLabels],
    options: {
        responsive: true,
        maintainAspectRatio: false,
        aspectRatio: 2,
        plugins: plugins,
        scales: scales,
        onClick: function (evt, element) {
            if (element.length > 0) {
                const categoriesChart = config.categoriesChart;
                let activeBarIndex = element[0].index;
                categoryLabel = categoriesChart.data.labels[activeBarIndex];
                
                // destroy any chart instances that are created
                if (categoriesChart instanceof Chart) {
                    categoriesChart.destroy();
                }

                //$('#how_i_spend_canvas').replaceWith($('<canvas id="SelectedCategory" height="400px"></canvas>')); //replace current canvas
                // Code to draw Chart
                config.monthlyChart = new Chart(ctx, {
                    type: 'bar',
                    data: howISpendChartdata,
                    plugins: [ChartDataLabels],
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        aspectRatio: 2,
                        plugins: plugins,
                        scales: scales,
                        onClick: function (e, activeElements) {
                            //get the colors for bars 
                            if (activeElements.length > 0) { // check the element is selected
                                const monthlyChart = config.monthlyChart;
                                monthlyChart.options.animation.colors = false;
                                                                
                                    monthlyChart.update();
                                                                        
                                }
                            }

                        }
                    },

                });
                config.monthlyChart.render();
            }
        },
    }
}); // document.Ready Ends()
2个回答

警告：仅当您未使用图例插件或不需要处理图例项单击事件时，此解决方案才有意义。

就我而言，即使我在图表选项中禁用了 legend 插件，我仍然会收到此错误，如下所示： 

plugins: {
  legend: {
      display: false
    }
  }

在我过滤由图例插件处理的事件后，错误停止发生，如下所示： 

plugins: {
  legend: {
      display: false,
      events: [] // this line was the key
    },
  }
Marko Bonaci
2021-10-05

我遇到了同样的问题，异常的原因是： 如果您在 onclick 事件中尝试销毁相同的图表，则在事件回调函数返回之前图表引用将变为空。这就是引发异常的原因。 您可以通过在事件回调完成后销毁图表实例来解决这个问题，即使用 setTimeout 函数，您可以在 100 毫秒左右后销毁图表。您可以这样做： 

options: {
    onClick: function (evt, element) {
        if (element.length > 0) {
            const categoriesChart = config.categoriesChart;
            let activeBarIndex = element[0].index;
            categoryLabel = categoriesChart.data.labels[activeBarIndex];

            setTimeout(() => {
                // destroy any chart instances that are created
                if (categoriesChart instanceof Chart) {
                    categoriesChart.destroy();
                }

                //$('#how_i_spend_canvas').replaceWith($('<canvas id="SelectedCategory" height="400px"></canvas>')); //replace current canvas
                // Code to draw Chart
                config.monthlyChart = new Chart(ctx, {
                    type: 'bar',
                    data: howISpendChartdata,
                    plugins: [ChartDataLabels],
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        aspectRatio: 2,
                        plugins: plugins,
                        scales: scales,
                        onClick: function (e, activeElements) {
                            //get the colors for bars 
                            if (activeElements.length > 0) { // check the element is selected
                                const monthlyChart = config.monthlyChart;
                                monthlyChart.options.animation.colors = false;
                                monthlyChart.update();
                            }
                        }
                    }
                });
                config.monthlyChart.render();
            }, 100);
        }
    }
}

以下是任何遇到类似问题的人的解决方案： 

options: {
    onClick: function (evt, element) {
        // get the require data from click event 
        let chart = Chart.getChart(e.chart.canvas.id);
        const points = chart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
        if (points.length) {
            const firstPoint = points[0];
            const elementIndex = firstPoint.index;
            const datasetIndex = firstPoint.datasetIndex;
            const dataset = chart.data.datasets[datasetIndex];
            const datasetFieldLabel = dataset.label;
            const itemLabel = chart.data.labels[elementIndex];
            const itemValue = dataset.data[elementIndex];
            
            setTimeout(() => {
                // destroy the chart
                // Render another chart
            }, 100);
        }
    }
}
Syed Asim
2021-12-03