正如问题中提到的，我正在使用 Charts.js 库。就我而言，我想创建一个折线图。折线图有一些数据点，我想通过给它们提供动画来突出显示它们。
请参阅以下示例来了解我即将提出的问题：
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myLineChart" width="400" height="200"></canvas>
<script>
// Sample data for the line chart
var data = {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Sample Data',
data: [10, 25, 18, 30, 15],
borderColor: 'blue',
backgroundColor: 'rgba(0, 0, 255, 0.2)',
fill: true,
}]
};
// Configuration options
var options = {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
type: 'category',
labels: data.labels,
},
}
};
// Get the canvas element
var ctx = document.getElementById('myLineChart').getContext('2d');
// Create the line chart
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
</script>
</body>
</html>例如，如何为数据点 x = February，y = 25 制作动画？
插件核心 API 提供了一系列可用于执行自定义代码的挂钩。您可以使用
afterInitsetInterval()plugins: [{
afterInit: chart => setInterval(() => {
const dataset = chart.data.datasets[0];
dataset.pointRadius[1] = dataset.pointRadius[1] == rHighlighted ? r : rHighlighted;
chart.update('none');
}, 500)
}],
请查看您修改后的代码，看看它是如何工作的。
const r = 3;
const rHighlighted = 8;
new Chart('myLineChart', {
type: 'line',
plugins: [{
afterInit: chart => setInterval(() => {
const dataset = chart.data.datasets[0];
dataset.pointRadius[1] = dataset.pointRadius[1] == rHighlighted ? r : rHighlighted;
chart.update('none');
}, 500)
}],
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Sample Data',
data: [10, 25, 18, 30, 15],
borderColor: ['blue', 'red','blue','blue','blue'],
pointRadius: [r, r, r, r, r],
pointHighlightRadius: r,
backgroundColor: 'rgba(0, 0, 255, 0.2)',
fill: true,
}]
},
options: {
maintainAspectRatio: false
}
});<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myLineChart" width="400" height="200"></canvas>