Chartjs - destroy()不执行任何操作

rggaifut 于 2022-11-07 发布在 Chart.js

关注(0)|答案(3)|浏览(199)

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
        }
    });         
}

chart.js

来源：https://stackoverflow.com/questions/60991598/chartjs-destroy-does-nothing

3条答案

按热度按时间

4c8rllxm1#

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

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

在函数的顶部包含它。当你全局声明chartID时，它会很好地工作。这样你就不需要再次声明图表了。

赞(0）回复(0）举报 2022-11-07

hiz5n14c2#

试试看：

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, {...});

赞(0）回复(0）举报 2022-11-07

xfb7svmp3#

我正在创建多个图表点击。但在创建图表之前，我只是破坏任何以前的图表，所以，这就是它的外观

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);

赞(0）回复(0）举报 2022-11-07

我来回答

Chartjs - destroy()不执行任何操作

3条答案

相关问题

热门标签

最新问答