使用新数据更新Chartjs

Question

最初的调用loadCharts()正确填充了图表。但是，当#convert-to触发事件时，将loadCharts重新加载数据，但是我具有在同一画布上绘制的两个图表的这种闪烁效果。这不是错误或相关问题，而是一个画布绘图。在这里看看：https : //www.dropbox.com/s/9onofdazkvp9uas/clip.mov?dl=0我已经阅读了无数线程，似乎chart.update()应该可以解决问题。在文档中：“ [[update()触发图表的更新。可以在更新数据对象后安全地调用它。这将更新所有比例尺，图例，然后重新呈现图表。”我究竟做错了什么？

Answer 1

buildChartObject(...)尝试仅更新图表数据时，无需再次调用。如果您保留图表的参考，则可以跳过该调用。这样做将允许Chart.js在调用时仅更新图表，chart.update()而不是先创建新图表然后再对其进行更新。

...

let returnsChart = buildChartObject($('#chart'), 'bar', timeAxis, percentAxis);

let loadCharts = function () {

    let params = {

        convertTo: $('#convert-to').val()

    };

    loadChartData('endpoint', returnsChart, params);

}

loadCharts();

$('#convert-to').on('change', function() {

    loadCharts();

});

...