Chart.js 入门：响应式图表与动态数据更新实战
Chart.js 是基于 HTML5 Canvas 的轻量级开源图表库，支持曲线、柱状等六种图表类型。本文介绍如何配置全局与局部选项实现响应式布局，并通过 removeData 和 addData 方法演示实时数据的动态添加与移除，适用于股票等高频数据场景。
Chart.js 概述与核心特性
入门基础
Chart.js 是一款基于 HTML5 的开源图表库，能够以简洁的方式生成美观的可视化图表。
其核心特性涵盖以下方面：
1、提供 6 种图表类型：折线图、柱状图、饼图、雷达图、极坐标区域图和环形图。 2、基于 HTML5 标准开发，兼容包括 IE7/8 在内的各类主流浏览器。 3、独立运行，不依赖其他第三方库，文件体积仅 4.5KB，且支持高度定制。
Chart.js 是一个轻量级、灵活且响应式的 HTML5 Canvas 图表库。内置六种图表类型，每种均配备丰富的自定义选项。若内置类型不足，开发者还可创建自定义图表类型。
Chart.js 六种图表类型的代码总大小仅为 11KB，并经过 gzip 压缩。该库采用模块化设计，允许仅引入所需的图表类型以进一步减小体积。可通过 cdnjs 链接引入该库。
JavaScript
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>图表配置与响应式设置
可用配置项
从工具提示（tooltip，即鼠标悬停时显示的提示信息）到动画效果，Chart.js 允许修改图表的绝大多数属性。本节将修改部分设置以展示 Chart.js 的构建过程，起始代码如下：
XHTML
<canvas id="canvas"></canvas>首先创建一个折线图。为使图表具有实际意义，需配置几个基本选项。折线图需要标签数组和数据集。标签将显示在 X 轴上。此处模拟了一些数据，数据被分配到一个数组中，每个数据集包含填充颜色、线条颜色和点样式。
在此示例中，将 fillColor 设置为透明。若不设置 fillColor，默认值为黑色或灰色。其他颜色属性同理，支持 RGBA、RGB、hex 或 HSL 格式，与 CSS 定义方式一致。
JavaScript
var lineData = {
labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4',
'Data 5', 'Data 6', 'Data 7'],
datasets: [{
fillColor: 'rgba(0,0,0,0)',
strokeColor: 'rgba(220,180,0,1)',
pointColor: 'rgba(220,180,0,1)',
data: [20, 30, 80, 20, 40, 10, 60]
}, {
fillColor: 'rgba(0,0,0,0)',
strokeColor: 'rgba(151,187,205,1)',
pointColor: 'rgba(151,187,205,1)',
data: [60, 10, 40, 30, 80, 30, 20]
}]
}设置全局选项
代码中设置了若干全局值。animationSteps 决定动画持续时间。可根据需要修改更多选项，如 scaleLineColor 和 scaleIntegersOnly。建议查阅 Chart.js 文档以了解库中提供的其他选项。
JavaScript
Chart.defaults.global = {
animationSteps : 50,
tooltipYPadding : 16,
tooltipCornerRadius : 0,
tooltipTitleFontStyle : 'normal',
tooltipFillColor : 'rgba(0,160,0,0.8)',
animationEasing : 'easeOutBounce',
scaleLineColor : 'black',
scaleFontSize : 16
}设置特定图表选项
除了全局选项，还有针对特定图表类型的配置选项。在折线图中，设置此类选项如下，供参考：
JavaScript
Chart.defaults.global = {
animationSteps : 50,
tooltipYPadding : 16,
tooltipCornerRadius : 0,
tooltipTitleFontStyle : 'normal',
tooltipFillColor : 'rgba(0,160,0,0.8)',
animationEasing : 'easeOutBounce',
scaleLineColor : 'black',
scaleFontSize : 16
}Chart.js 生成的图表默认非响应式。将 responsive 设置为 true 可使其变为响应式图表。若需所有图表均为响应式，建议设置全局值，如下所示：
JavaScript
Chart.defaults.global.responsive = true;以下是折线图的示例效果：
See the Pen Chart.js Responsive Line Chart Demo by SitePoint (@SitePoint) on CodePen.动态数据的实时更新
动态数据的增加与移除
有时需要展示实时变化的数据，股票市场是典型应用场景。本节将创建柱状图，并在动态删除数据的同时增加新数据。使用随机数据，通过柱状图展示。大部分代码与前例相似。在拥有 HTML（与前例相同）后，添加 JavaScript 代码。
首先编写代码将动态数据填充至图表。使用 function 表达式生成随机值，并赋值给变量 dData。这些值在需要变化时提供随机数据。与前例一样，创建标签数组和数据集，并设置任意 fillColor。
JavaScript
var dData = function() {
return Math.round(Math.random() * 90) + 10;
};
var barData = {
labels: ['dD 1', 'dD 2', 'dD 3', 'dD 4',
'dD 5', 'dD 6', 'dD 7', 'dD 8'],
datasets: [{
fillColor: 'rgba(0,60,100,1)',
strokeColor: 'black',
data: [dData(), dData(), dData(), dData(),
dData(), dData(), dData(), dData()]
}]
}接下来编写代码以删除和添加柱状图数据。初始化 index 为 11，使用两个方法：removeData() 和 addData(valuesArray, label)。调用实例的 removeData() 方法删除所有数据集的第一个值。在 barChartDemo 示例中，移除数据集的第一个值。调用 addData() 传递标签数组值，在图表末尾增加新数据节点。以下代码每 3 秒更新一次图表。
JavaScript
var index = 11;
var ctx = document.getElementById('canvas').getContext('2d');
var barDemo = new Chart(ctx).Bar(barData, {
responsive: true
});
setInterval(function() {
barDemo.removeData();
barDemo.addData([dData()], 'dD ' + index);
index++;
}, 3000);另一种更新图表数值的方法是直接设置数值。在以下示例中，第一行将第一个数据集的第二个柱形数值设为 60。若此时更新，柱形将通过动画将当前值变为 60。
JavaScript
barDemo.datasets[0].bars[2].value = 60;
barDemo.update();以下是柱状图的示例（由 SitePoint 在 CodePen 上创建）：
See the Pen Chart.js Responsive Bar Chart Demo by SitePoint (@SitePoint) on CodePen.总结与建议
结论
本教程涵盖了 Chart.js 的一些重要功能。第一个示例展示了全局设置的使用，同时 Chart.js 也为每种图表类型提供了专属的自定义设置。若当前可用图表无法满足需求，还可创建自定义图表类型。建议查阅文档，深入了解该库的功能边界。
anime.js 快速入门：怎么引入库并编写第一个 DOM 动画
2026-11-05 14:22:43
在线JS解密后变量名仍乱码？结合浏览器DevTools调试还原
2026-11-04 20:26:01
怎么在浏览器中运行JavaScript代码并查看输出结果
2026-11-04 09:07:33
JS 获取屏幕分辨率：window.screen.width 与 height 用法
2026-11-04 08:52:48
为什么推荐用DOMContentLoaded代替window.onload初始化JS
2026-11-04 08:42:33