Chart.js-如何使用间隔更新图表数据

Question

我有一个从API获取数据的圆环图。图表显示正常，但我无法更新图表数据，并且每2秒更新一次。我尝试并搜索了许多主题，但大多数都是过时的chart.js版本，我的javascript技能也很差。

图表.js v3.9.1

const totalRunTime = current_array.MTConnectStreams.Streams.DeviceStream.ComponentStream[12].Samples.DynamicBasicData[1];
const totalTimeRemaining = current_array.MTConnectStreams.Streams.DeviceStream.ComponentStream[12].Samples.DynamicBasicData[13];
const timeRemaining = ((totalTimeRemaining / totalRunTime) * 100)
// Setup
const datapoints = [(100 - timeRemaining), timeRemaining];
const data = {
datasets: [{
data: datapoints,
backgroundColor: ['rgba(20, 121, 255, 0.7)', 'rgba(208, 208, 208, 0.5)'],
borderWidth: 1,
cutout: '70%'
}]
};
// Counter
const counter = {
id: 'counter',
beforeDraw( chart, args, options ) {
const { ctx, chartArea: { top, right, bottom, left, width, height } } = chart;
ctx.save();
ctx.font = options.fontSize + 'px ' + options.fontFamily;
ctx.textAlign = 'center';
ctx.fillStyle = options.fontColor;
ctx.fillText(datapoints[0].toFixed(3) + '%', width / 2, (height / 2) + (options.fontSize * 0.34));
}
};
// Config
const config = {
type: 'doughnut',
data,
options: {
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
},
counter: {
fontColor: '#193b68',
fontSize: '16',
fontFamily: 'Sofia Pro Medium'
}
}
},
plugins: [counter]
};
// Render init
const doughnutChart = new Chart(
document.getElementById('doughnutChart'),
config
);
setInterval(function addData(chart, data) {
chart.data.datasets.forEach((dataset) => {
dataset.data = data;
});
chart.update('none');
}, 2000
);

HTML

<canvas id="doughnutChart"></canvas>

Answer 1

它似乎没有更新，因为您正在调用数据并存储在一个变量中，从应用程序的范围来看，该变量没有更改。

如果您将数据请求移动到一个函数，然后从setInterval中的初始化代码和调用该函数，则每次调用函数getData时，您都会看到数据更新。

这是你的代码的一个版本，我的意思是，其中使用getData()而不是datapoints:

const getData = () => {
console.log('Requesting data')
const totalRunTime = current_array.MTConnectStreams.Streams.DeviceStream.ComponentStream[12].Samples.DynamicBasicData[1];
const totalTimeRemaining = current_array.MTConnectStreams.Streams.DeviceStream.ComponentStream[12].Samples.DynamicBasicData[13];
const timeRemaining = ((totalTimeRemaining / totalRunTime) * 100)
return [(100 - timeRemaining), timeRemaining]
}
const data = {
datasets: [{
data: getData(),
backgroundColor: ['rgba(20, 121, 255, 0.7)', 'rgba(208, 208, 208, 0.5)'],
borderWidth: 1,
cutout: '70%'
}]
};
const counter = {
id: 'counter',
beforeDraw( chart, args, options ) {
const { ctx, chartArea: { top, right, bottom, left, width, height } } = chart;
ctx.save();
ctx.font = options.fontSize + 'px ' + options.fontFamily;
ctx.textAlign = 'center';
ctx.fillStyle = options.fontColor;
ctx.fillText(getData()[0].toFixed(3) + '%', width / 2, (height / 2) + (options.fontSize * 0.34));
}
};
const config = {
type: 'doughnut',
data,
options: {
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
},
counter: {
fontColor: '#193b68',
fontSize: '16',
fontFamily: 'Sofia Pro Medium'
}
}
},
plugins: [counter]
};
const doughnutChart = new Chart(
document.getElementById('chart'),
config
);
setInterval(function addData(chart, data) {
console.log('updating', Date.now())
doughnutChart.data.datasets.forEach((dataset) => {
dataset.data = getData();
});
doughnutChart.update('none');
}, 2000
);

这是一个更新版本的代码笔，但使用了随机值，而不是您的数据请求。

这可能是问题所在，我希望这对你有所帮助。

一个技巧是使用console.log查看被调用的内容，将代码放在函数中也可以通过使用console.log或debugger查看在何时何地调用代码来简化调试。