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重新加载数据，但是我在同一画布上绘制的两个图表都具有这种闪烁效果。这不是错误或相关问题，而是一个画布绘图。

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

...

使用新数据更新Chartjs

1 个答案: