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

debugcn 发表于 Dev

脾气暴躁的克鲁顿

我正在使用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来显示此问题。要重新创建图例，只需单击图例中的值之一，然后单击“更新表”按钮即可显示图例每次都被重置。

猎头者凯夫

我不喜欢合并图表和数据。我要data和options作为单独的变量。这样，您的update()作品便会变得魅力无限，并且变得更短，更容易阅读。JSBin包含所有代码

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。