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()或myChart.clear()方法。我也尝试在for循环之外移动myChart声明，但它也没有帮助。

有关如何处理此事的任何建议吗？

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

图表js旧图表数据未清算

1 个答案: