Javascript 使用新数据更新Chartjs

我的目标是用服务器上的新数据更新图表。这是我的密码：

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

}());

（函数（）{
"严格使用",；
让color=Chart.helpers.color；
window.ChartColor={
红色：“rgb（255，99，132）”，
橙色：“rgb（25515964）”，
黄色：“rgb（25520586）”，
绿色：“rgb（75192192）”，
蓝色：“rgb（54162235）”，
紫色：“rgb（153102255）”，
灰色：“rgb（201203207）”
};
设时间轴=[{
键入：“时间”，
}];
设百分比轴=[{
滴答声：{
贝吉纳泽罗：错，
回调：函数（值）{
返回数学四舍五入（值*1000）/10+'%'；
}
}
}];
让buildChartObject=函数（ctx、type、xax、yax）{
返回新图表（ctx{
类型：类型，
数据：空，
选项：{
回答：是的，
标题：{
显示：对，
fontStyle:'正常'，
填充：10，
字体大小：12
},
比例：{
xAxes:xAxes，
亚克斯：亚克斯
},
图例：{
显示：假
}
}
});
};
让loadChartData=函数（端点、图表、参数）{
$.ajax({
url:'/api/v1/'+端点，
方法：“GET”，
数据类型：“json”，
params:params，
成功：功能（d）{
让bgColors=null，bdColors=null；
如果（chart.config.type=='line'）{
bgColors=color（window.chartColors.blue）.alpha（0.5.rgbString（）；
bdColors=window.chartColors.blue；
}否则{
bgColors=d.data.map(
（值）=>值<0？颜色（window.chartColors.red）.alpha（0.5）.rgbString（）：
颜色（window.chartColors.green）.alpha（0.5）.rgbString（）
);
bdColors=d.data.map(
（值）=>值<0？window.chartColors.red:window.chartColors.green
);
}
if（chart.options.scales.xAxes[0]。类型=='time'）{
设日期单位={
每日:"一天",，
每周:"一周",，
每月：'月'，
年度：“年度”
};
chart.options.scales.xAxes[0].time.unit=dateUnits[d.params.convertTo]；
}
chart.options.title.text=d.name；
chart.data.labels=d.index；
图表.数据.数据集[0]={
背景颜色：背景颜色，
边框颜色：bdColors，
边框宽度：1，
数据：d.data
};
chart.update（）；
}
});
};
让loadCharts=函数（）{
设params={
convertTo:$（'#convert to'）.val（）
}
让returnsChart=buildChartObject（$（'图表'），'条形'，时间轴，百分比轴）；
loadChartData（'endpoint'，returnsChart，params）；
}
负荷图（）；
$（“#转换为”）。在（'change'，function（）上{
负荷图（）；
});
}());

对

loadCharts（）

的初始调用将正确填充图表。但是，当触发

#convert to

事件时，

loadCharts

会重新加载数据，但我在同一画布上绘制两个图表时会出现这种闪烁效果。这不是一个bug或相关问题，而是一个画布绘制问题

请看这里：

我已经读了无数关于这方面的文章，似乎

chart.update（）

应该可以解决这个问题。从文档中：“[

update（）

]触发图表更新。更新数据对象后可以安全地调用此命令。这将更新所有比例、图例，然后重新呈现图表。”

---

我做错了什么？

当您尝试更新图表的数据时，无需再次调用

buildChartObject（…）

。如果你抓住了图表的一个参考点，你可以跳过这个电话。这样做将允许Chart.js在调用

Chart.update（）

时只更新图表，而不是创建一个新图表然后更新它

。。。
让returnsChart=buildChartObject（$（'图表'），'条形'，时间轴，百分比轴）；
让loadCharts=函数（）{
设params={
convertTo:$（'#convert to'）.val（）
};
loadChartData（'endpoint'，returnsChart，params）；
}
负荷图（）；
$（“#转换为”）。在（'change'，function（）上{
负荷图（）；
});
...

我们是否与……相关。。。？