Chart.js似乎不太适合npm用户,在版本3中,由于树摇动的原因,您需要注册图表元素。这是一个使用chart.js@3.6.1的示例。
HTML
<div style="width: 600px;">
<canvas id="myChart"></canvas>
</div>
JS
import { Chart, LinearScale, BarElement, BarController, CategoryScale } from 'chart.js';
Chart.register(LinearScale, BarElement, BarController, CategoryScale);
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
结果![输入图像描述](https://istack.dev59.com/qPdIq.webp)