图表js旧图表数据未清除

Question

这个问题已经被问过很多次了，我经历了其中的大部分，但没有一个能帮助我找到解决方案。

我正在使用 for 循环生成几个条形图作为报告功能的一部分。

我正在使用带有 Express Handlebars 的 node.js。

我的页面看起来像：

<div class="row report-charts">
    <div class="col-md-12">
    {{#buildings}}
        <div class="col-md-6">
           <h4>{{Name}}</h4>
           <canvas id="{{idBuildings}}" width="200" height="80"></canvas>
        </div>
    {{/buildings}}
    </div>
</div>

我的 js 代码如下所示：

$('.case-report-btn').click(function(){

        $.ajax({
            type: 'post',
            url: '/reports/cases/filter',
            data : {
                StartDate : $('.start-ms-time-hidden').val(),
                EndDate : $('.end-ms-time-hidden').val(),
                ReportKey : $('.cases-filter-type').val()
            },
            dataType: 'json',
            success: function(res) {
                $('.report-charts').show();
                for(key in res) {
                    var innerObj = res[key]; //gives the inner obj
                    var ctx = document.getElementById(key); //the idBuildings
                    var labels = [];
                    var data = [];
                    var buildingName = innerObj.Name;
                    for(innerKey in innerObj) {
                        if(innerKey != 'Name' && innerKey != 'Total') {
                            labels.push(innerKey);
                            data.push(innerObj[innerKey]);
                        }
                    }

                    var options = {
                        type: 'bar',
                        data: {
                            labels: labels,
                            datasets: [{
                                label: buildingName,
                                data: data,
                                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                                borderColor: 'rgba(255,99,132,1)',
                                borderWidth: 1
                            }]
                        },
                        options: {
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        beginAtZero:true,
                                        fixedStepSize: 1
                                    }
                                }]
                            }
                        }
                    }
                    var myChart = new Chart(ctx, options);
                }
                $('#pleaseWaitDialog').modal('hide');
            },
            error: function(err) {
                $('#pleaseWaitDialog').modal('hide');
                bootbox.alert('Error: ' + err);
            }
        });
    });

所以基本上，我使用 for 循环在页面上生成多个图表。在循环中，我声明了图表变量，每次更改报告参数并点击按钮时，都会生成新图表。但是当我将鼠标悬停在它上面时，旧的仍然出现。

现在我不确定应该把myChart.destroy()ormyChart.clear()方法放在哪里。我还尝试将 myChart 声明移到 for 循环之外，但也无济于事。

有关如何处理此问题的任何建议？

Answer 1

我认为有几种方法可以做到。如果图表已存在，您可以更新图表数据。您可以使用以下两个功能：

function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}

首先，您必须删除所有数据，然后添加新数据。

如果您想销毁图表并再次创建它，您必须将变量保存为全局变量。为此，您必须像这样声明变量window.myChart，然后在创建新图表之前，如下所示：

if (window.myChart) window.myChart.destroy();
window.myChart = new Chart(ctx, options);

您可以尝试的另一种方法是移除画布并创建另一个画布。像这样的东西：

$('#your_canvas').remove();
$('#your_canvas_father').append('<canvas id="your_canvas"></canvas>');