如何使用 Chart.js？安装 Chart.js（CDN 或 NPM）创建图表对象（获取画布元素、设置图表类型、数据和选项）自定义图表（使用广泛的选项，如标题、网格线、图例和交互性）
如何使用 Chart.js
Chart.js 是一个免费的开源 JavaScript 库，用于在 Web 应用程序中创建交互式图表。它提供了一个简单易用的 API，可以轻松创建各种类型的图表，包括条形图、折线图、饼图和雷达图。
安装 Chart.js
要使用 Chart.js，您需要将其包含到您的 HTML 文件中。您可以通过以下方式之一进行：
-
使用 CDN：
-
从 NPM 安装：
npm install chart.js
创建图表
要创建一个图表，您需要：
-
获取画布元素：
const canvas = document.getElementById('myChart'); -
创建一个图表对象：
const chart = new Chart(canvas, { type: 'bar', data: { labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], datasets: [{ label: 'Sales', data: [10, 20, 30, 40, 50] }] }, options: { // 图表选项 } });
自定义图表
Chart.js 提供了广泛的选项，允许您自定义图表的外观和行为。这些选项在 options 对象中设置。一些常见的选项包括：
-
标题：
title -
网格线：
scales -
图例：
legend -
工具提示：
tooltips -
交互性：
interaction
示例
以下是一个创建条形图的示例：
const canvas = document.getElementById('myChart');
const chart = new Chart(canvas, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'Sales',
data: [100, 200, 300, 400, 500]
}]
},
options: {
title: {
text: 'Monthly Sales'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
}); 
