Chart.js 控制台 JS 在单击事件时销毁图表时出错

问题描述

在第一个图表“config.categoriesChart”的条形点击事件上得到控制台错误“chart.js:10403 Uncaught TypeError: Cannot read property 'handleEvent' of undefined” enter image description here 显示为 chart.legend.handleEvent(args.event);

该问题是在破坏栏上的第一个图表单击第一个图表的事件后发生的。

但是如果我使用 $('#how_i_spend_canvas').replaceWith($('')); 它工作正常而不会破坏图表。 enter image description here

请问有什么问题？

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',plugins: [ChartDataLabels],options: {
                        responsive: true,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()

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）