主题
基本结构与初始化
使用 Chart.js 创建图表,首先需要准备一个 HTML 画布元素 <canvas>
,作为图表的渲染区域。然后通过 JavaScript 代码初始化 Chart 实例,传入配置项完成图表绘制。
1. 准备 Canvas 元素
在 HTML 中添加一个 <canvas>
标签,指定宽度和高度,作为图表的容器:
html
<canvas id="myChart" width="600" height="400"></canvas>
2. 初始化 Chart 实例
在 JavaScript 中,通过获取 Canvas 上下文,创建 Chart
对象,指定图表类型和数据配置:
js
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', // 图表类型,如 line, bar, pie 等
data: {
labels: ['一月', '二月', '三月', '四月', '五月'],
datasets: [{
label: '示例数据',
data: [10, 20, 30, 40, 50],
backgroundColor: 'rgba(75, 192, 192, 0.6)'
}]
},
options: {
responsive: true
}
});
3. 配置说明
type
:指定图表类型,如折线图(line)、柱状图(bar)、饼图(pie)等。data
:包含标签(labels)和数据集(datasets)。options
:配置图表行为和样式,如响应式、动画等。
通过以上步骤,即可快速完成基本图表的创建。
代码演示
loading