javascript - 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() 函数运行时，这个过滤器也会被重置。在我看来，这不应该是预期的行为，我不是要更新表的 View ，而是要更新数据以使其保持最新。

如何让这个过滤器在表中的数据更新时不被重置？

这是一个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;
}