javascript - 使用新数据更新 Chartjs

Question

我的目标是使用来自服务器的新数据更新我的图表。这是我的代码:

(function () {
    'use strict';

    let color = Chart.helpers.color;
    window.chartColors = {
        red: 'rgb(255, 99, 132)',
        orange: 'rgb(255, 159, 64)',
        yellow: 'rgb(255, 205, 86)',
        green: 'rgb(75, 192, 192)',
        blue: 'rgb(54, 162, 235)',
        purple: 'rgb(153, 102, 255)',
        grey: 'rgb(201, 203, 207)'
    };

    let timeAxis = [{
        type: 'time',
    }];

    let percentAxis = [{
        ticks: {
            beginAtZero: false,
            callback: function(value) {
                return Math.round(value * 1000) / 10 + '%';
            }
        }
    }];

    let buildChartObject = function (ctx, type, xAxes, yAxes) {
        return new Chart(ctx, {
            type: type,
            data: null,
            options: {
                responsive: true,
                title: {
                    display: true,
                    fontStyle: 'normal',
                    padding: 10,
                    fontSize: 12

                },
                scales: {
                    xAxes: xAxes,
                    yAxes: yAxes
                },
                legend: {
                    display: false
                }
            }
        });
    };

    let loadChartData = function (endpoint, chart, params) {
        $.ajax({
            url: '/api/v1/' + endpoint,
            method: 'GET',
            dataType: 'json',
            params: params,
            success: function (d) {
                let bgColors = null, bdColors = null;
                if (chart.config.type === 'line') {
                    bgColors = color(window.chartColors.blue).alpha(0.5).rgbString();
                    bdColors = window.chartColors.blue;
                } else {
                    bgColors = d.data.map(
                        (value) => value < 0 ? color(window.chartColors.red).alpha(0.5).rgbString() :
                            color(window.chartColors.green).alpha(0.5).rgbString()
                    );
                    bdColors = d.data.map(
                        (value) => value < 0 ? window.chartColors.red : window.chartColors.green
                    );
                }
                if (chart.options.scales.xAxes[0].type === 'time') {
                    let dateUnits = {
                        daily: 'day',
                        weekly: 'week',
                        monthly: 'month',
                        yearly: 'year'
                    };
                    chart.options.scales.xAxes[0].time.unit = dateUnits[d.params.convertTo];
                }
                chart.options.title.text = d.name;
                chart.data.labels = d.index;
                chart.data.datasets[0] = {
                    backgroundColor: bgColors,
                    borderColor: bdColors,
                    borderWidth: 1,
                    data: d.data
                };
                chart.update();
            }
        });
    };

    let loadCharts = function () {
        let params = {
            convertTo: $('#convert-to').val()
        }
        let returnsChart = buildChartObject($('#chart'), 'bar', timeAxis, percentAxis);
        loadChartData('endpoint', returnsChart, params);
    }

    loadCharts();

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

}());

对 loadCharts() 的初始调用正确填充了图表。但是，当触发 #convert-to 事件时，loadCharts 会重新加载数据，但在同一 Canvas 上绘制的两个图表都会出现闪烁效果。这不是一个错误或相关问题，而是一个 Canvas 绘制问题。

看看这里: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();
});

...