Chart.js使用更新功能时更改选定的图例过滤器

Question

我正在使用Chart.js在我的网页上显示堆积的条形图。我正在尝试使此图表在页面上自动更新，而无需用户干预，为此，我正在使用AJAX。

setInterval(function() {

    $.get("ajax?type=chart_update&id={{ @GET.id }}", function(data){
        myChart.data = JSON.parse(data);
        myChart.update(0);
    });

}, 60000);

这将每60秒成功重置一次图表。

但是，当用户通过单击图例中的某个数据集来过滤掉某个数据集时，就会出现问题。当运行update()功能时，该滤波器也会被重置。在我看来，这不应该是预期的行为，我不是在尝试更新表的视图，而只是更新数据以使其保持最新。

如何更新表中的数据时不重置此过滤器？

这里是codepen以显示此问题。要重新创建它，只需单击图例中的值之一，然后单击“更新表”按钮即可显示每次都重置图例。

Answer 1

我不喜欢合并图表和数据。我想要data和options作为单独的变量。然后，您的update()就像一个超级按钮，变得更短且更易于阅读。JSBin with all the code

var chartOptions = {
    scales: {
        xAxes: [{
            stacked: true
        }],
        yAxes: [{
            stacked: true
        }]
    }
}

var chartData = {
    labels: ["First", "Second", "Third", "Fourth"],
    datasets: [{
        label: 'First',
        data: [12, 19, 3, 5],
        backgroundColor: 'red'
    },{
        label: 'Second',
        data: [5, 19, 3, 5],
        backgroundColor: 'blue'
    },{
        label: 'Third',
        data: [8, 19, 3, 5],
        backgroundColor: 'green'
    },{
        label: 'Fourth',
        data: [9, 19, 3, 5],
        backgroundColor: 'orange'
    }]
}

var ctx = document.getElementById("myChart");
var stackedBar = new Chart(ctx, {
    type: 'bar',
    data: chartData,
    options: chartOptions
});

function updateChart() {
    chartData.datasets.forEach(function(element) {
        element.data = r();
    });
    stackedBar.update();
}

function r() {
    var values = [];
    for (i = 0; i < 4; i++) { 
        values.push(Math.floor(Math.random() * 100) + 1);
    }
    return values;
}