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

我正在使用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（）

函数时，此筛选器也会重置。在我看来，这不应该是预期的行为，我不尝试更新表的视图，而只是更新数据以保持其最新

更新表中的数据时，如何使此筛选器不重置

---

这里有一个例子来说明这个问题。要重新创建它，只需单击图例中的一个值，然后单击“更新表格”按钮，即可显示每次都会重置图例。

我不喜欢组合图表和数据。我希望

数据

和

选项

作为单独的变量。然后，你的

update（）

就成了一种魅力，而且短得多，容易阅读。

var图表选项={
比例：{
xAxes：[{
是的
}],
雅克斯：[{
是的
}]
}
}
var图表数据={
标签：[“第一”、“第二”、“第三”、“第四”]，
数据集：[{
标签：'第一'，
数据：[12,19,3,5]，
背景颜色：“红色”
},{
标签：'第二'，
数据：[5,19,3,5]，
背景颜色：“蓝色”
},{
标签:"第三",，
数据：[8,19,3,5]，
背景颜色：“绿色”
},{
标签：'第四'，
数据：[9,19,3,5]，
背景颜色：“橙色”
}]
}
var ctx=document.getElementById（“myChart”）；
var stackedBar=新图表（ctx{
类型：'bar'，
数据：图表数据，
选项：图表选项
});
函数updateChart（）{
图表数据。数据集。forEach（函数（元素）{
element.data=r（）；
});
stackedBar.update（）；
}
函数r（）{
var值=[]；
对于（i=0；i<4；i++）{
value.push（Math.floor（Math.random（）*100）+1）；
}
返回值；
}

你说得对，这不是预期的行为<代码>更新（）只应更新数据。你能发布你的代码吗？@HeadhunterKev我添加了一个代码笔的例子。谢谢你的笔，对我来说它非常重要。我在下面发布了一个答案。因此，您只需更新用于初始化图表的原始变量，而不必更新

stackedBar.data

变量？我真的不明白这是如何更新表格的。更新变量中的数据，图表将使用更新后的数据。我从来没有像你发布的那样做过，很多人也用过。但我不知道我的方式有什么缺点。你的问题就是一个很好的例子。如果我替换整个

chartData

变量，它会起作用吗？标签可能会更改。。。在我的实际项目中，我现在已经切换到了这一点，而且它似乎根本没有更新，您的代码中也不会有太大的变化。通过这种方式，您可以确保只更改数据，而不是整个图表。它应该很好用。如果要更改标签，可以使用相同的方法更新标签<代码>chartData.labels=['1st'，'2nd'，'3rd'，'4th']；stackedBar.update（）我实际上只是在服务器端完成了这项工作，不过，我很乐意取消删除我的问题，这样你就可以发布一个答案，可能会帮助其他人。编辑：取消删除

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