Question

Chartjs-destroy（）不执行任何操作

2020-04-02

1982

javascript chart.js

我在使用 chartJS 时遇到了问题。我正在调用一个函数来创建新图表。创建成功了，但我想销毁所有之前的图表，这样在调用函数时就可以得到一个新的图表。

这是我目前的代码：

var chartID;

function addData(chartType,data) {

    for (var i = 0; i < data.length; i++) {
        dataLabels.push(data[i][0]);
        dataPoints.push(data[i][1]);
        //console.log(data[i][1]);
    }

    if(chartID){
        console.log('destroy');
        chartID.destroy();
    }

    var ctx = document.getElementById('chart01').getContext('2d');


    chartID = new Chart(ctx, {
        type: chartType,
        data: {
            labels: dataLabels,
            datasets: [{
                label: 'Labels',
                data: dataPoints,
                backgroundColor: '#333'
            }]
        },
        options: {
            maintainAspectRatio: false,
            aspectRatio: 1
        }
    });         
}

Answer 1

我之前也遇到过同样的问题。我只是添加了一个条件来检查图表变量是否为空。

if(chartID != null){
   chartID.destroy();
}

将其包含在函数顶部。它会正常工作，因为您正在全局声明 chartID 。这样您就不需要再次重新声明图表了。

Answer 2

尝试一下：

const chartCanvas = document.getElementById('myChart');

            if( window.lineChart != undefined){
                window.lineChart.destroy();
            }
            window.lineChart = new Chart(chartCanvas,{
                type: 'line',
                data: {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    datasets: [
                        {
                            label: 'Cases',
                            data: [23,42,22,45,56,77,33,22,46,77,32,44],
                            fill: false,
                          //  backgroundColor: 'red',
                            borderColor: ['rgb(255, 255, 0)'],
                            lineTension: 0.2,
                            borderWidth: 1.5
                        }
                    ]
                },
                options:{
                    title: {
                        display: true,
                        text: "Temperature variation",
                        fontFamily: 'Arial',
                        fontSize: 16
                    },
                    legend: {
                        display: true,
                        position: "right",
                        labels: {
                            boxWidth:10
                        }
                    },
                    //stacked - start with 0 as minimum value for y-axis
                    scales:{
                        yAxes: [{
                            stacked: true,
                            gridLines:{
                                display: true,
                                color: '#FFFFFF',
                                lineWidth: 1,
                                zeroLineColor: 'blue',
                                zeroLineWidth: 2,
                                drawBorder: false // this to remove the ghost line that appears
                                                  // when you add zeroLine x-axis
                            }

                        }],
                        xAxes: [{             
                           gridLines:{
                                display: true,
                                zeroLineColor: 'blue',
                                zeroLineWidth: 1,
                                color: 'transparent'
                            }
                        }]
                    }

                }
            });

----------------- 添加了上面的代码示例 ------------------

我在使用 ChartJs 时遇到了一些问题。不知何故，它创建了一个新图表，而之前的图表仍然在画布中，当您将鼠标悬停时会显示出来。

这对我有用：

if( window.chartID!= undefined){
                window.chartID.destroy();
            }

chartID = new Chart(ctx, {...});

Answer 3

我点击后会创建多个图表。但在创建图表之前，我会销毁所有之前的图表所以，这就是它的样子

    var chartStatus
    // on one onclick
    if (chartStatus) {    chartStatus.destroy();  }
    chartStatus = new Chart(document.getElementById("co2Chart"), co2Config);
    // on another onclick    
    if (chartStatus) {    chartStatus.destroy();  }
    chartStatus = new Chart(document.getElementById("tempChart"), tempConfig);