CanvasJS 教程：创建强大的交互式图表
什么是 CanvasJS？
CanvasJS 是一个功能强大、轻量级且易于使用的 JavaScript 图表库，它允许你在网页中创建各种类型的高质量、交互式图表。
（图片来源网络，侵删）
核心特点：
- 纯 JavaScript：无需依赖其他库（如 jQuery），可以直接在项目中使用。
- 响应式设计：图表会自动适应其容器的大小，在桌面和移动设备上都能完美显示。
- 丰富的图表类型：支持折线图、面积图、柱状图、饼图、散点图、股票图、雷达图等超过 30 种图表类型。
- 高度可定制：你可以自定义图表的每一个方面，包括颜色、字体、轴、数据点、工具提示、图例等。
- 强大的交互功能：内置缩放、平移、数据点高亮、工具提示、导出等功能。
- 兼容性好：支持所有现代浏览器，包括 Chrome, Firefox, Safari, Edge 等。
- 免费版与商业版：提供功能齐全的免费版用于非商业项目，商业项目需要购买许可证。
快速入门：你的第一个 CanvasJS 图表
让我们从最简单的例子开始,创建一个基本的柱状图。
引入 CanvasJS 库
你需要将 CanvasJS 库引入到你的 HTML 文件中，最简单的方式是通过 CDN：
（图片来源网络，侵删）
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
准备一个容器
在 <body> 标签中，创建一个 <div> 元素作为图表的容器，给它一个 id，并设置宽度和高度。
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
编写 JavaScript 代码
在 <script> 标签中，编写代码来初始化和渲染图表。
（图片来源网络，侵删）
<script>
// 图表配置和数据
const chart = new CanvasJS.Chart("chartContainer", {
// === 核心配置区 === {
text: "我的第一个 CanvasJS 图表"
},
data: [{
// 数据系列类型
type: "column",
// 数据点
dataPoints: [
{ y: 10, label: "苹果" },
{ y: 15, label: "香蕉" },
{ y: 25, label: "橙子" },
{ y: 30, label: "葡萄" },
{ y: 28, label: "西瓜" }
]
}]
});
// 渲染图表
chart.render();
</script>
完整代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">CanvasJS 快速入门</title>
</head>
<body>
<h1>我的第一个图表</h1>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<!-- 引入 CanvasJS 库 -->
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<script>
window.onload = function () {
const chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "水果销量统计"
},
axisY: {
title: "销量 (公斤)"
},
data: [{
type: "column",
dataPoints: [
{ y: 10, label: "苹果" },
{ y: 15, label: "香蕉" },
{ y: 25, label: "橙子" },
{ y: 30, label: "葡萄" },
{ y: 28, label: "西瓜" }
]
}]
});
chart.render();
}
</script>
</body>
</html>
将以上代码保存为 .html 文件，用浏览器打开，你就能看到一个漂亮的柱状图了！
核心概念详解
理解 CanvasJS 的几个核心对象，你就能掌握其用法。
-
CanvasJS.Chart对象 这是图表的主要对象，通过new CanvasJS.Chart(containerId, options)创建。containerId：图表容器的id。options：一个包含所有配置项的 JavaScript 对象。
-
options配置对象 这是图表的“大脑”，控制图表的所有外观和行为，它包含多个子配置对象，如title,axisX,axisY,legend,toolTip,data等。 -
data数组 这是图表的“数据源”，一个图表可以包含多个数据系列（在一个图表中同时显示销售额和利润），data是一个数组。- 每个数组元素代表一个数据系列,是一个对象，包含
type,dataPoints等属性。
- 每个数组元素代表一个数据系列,是一个对象，包含
-
dataPoints数组 这是实际的数据点集合。- 每个数据点是一个对象,至少包含一个
y值（对于大多数图表类型）。 - 你还可以添加
label（标签）、x（X轴值）、name（工具提示中显示的名称）等属性。
- 每个数据点是一个对象,至少包含一个
常用配置与自定义
CanvasJS 的强大之处在于其高度的可定制性。
和副标题
text: "2025年销售报告",
fontColor: "blue",
fontFamily: "Verdana",
fontSize: 24,
fontWeight: "bold"
},s: [{
text: "第一季度数据"
}]
坐标轴配置
axisX: { "月份",FontColor: "cyan",
lineColor: "red",
gridColor: "lightgrey",
interval: 1, // 设置刻度间隔
valueFormatString: "MMM" // 格式化X轴标签，如 Jan, Feb
},
axisY: { "销售额 (万元)",FontColor: "green",
lineColor: "#4B0082",
gridColor: "lightgrey",
includeZero: true // Y轴从0开始
}
数据系列的自定义
这是最常用的部分,可以改变图表类型、颜色、样式等。
data: [{
type: "line", // 改为折线图
name: "系列 A", // 用于图例
showInLegend: true, // 是否在图例中显示
dataPoints: [
{ x: new Date(2025, 0, 1), y: 65 },
{ x: new Date(2025, 1, 1), y: 78 },
{ x: new Date(2025, 2, 1), y: 90 },
{ x: new Date(2025, 3, 1), y: 81 }
]
}, {
type: "column", // 添加第二个系列，类型为柱状图
name: "系列 B",
showInLegend: true,
dataPoints: [
{ x: new Date(2025, 0, 1), y: 45 },
{ x: new Date(2025, 1, 1), y: 55 },
{ x: new Date(2025, 2, 1), y: 60 },
{ x: new Date(2025, 3, 1), y: 70 }
]
}]
工具提示
toolTip: {
enabled: true,
shared: true, // 多个系列共享工具提示
backgroundColor: "rgba(50,50,50,.8)",
cornerRadius: 5,
contentFormatter: function (e) {
let str = "";
for (let i = 0; i < e.entries.length; i++) {
let entry = e.entries[i];
str += entry.dataSeries.name + ": " + entry.dataPoint.y + "<br/>";
}
return str;
}
}
图例
legend: {
verticalAlign: "top", // top, center, bottom
horizontalAlign: "center", // left, center, right
cursor: "pointer", // 鼠标悬停时显示手型
itemclick: function (e) {
// 点击图例时可以切换数据系列的可见性
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}
实战案例：动态更新数据
CanvasJS 可以轻松地与后端数据或用户交互结合，实现动态更新。
目标：点击按钮，随机生成新的数据并更新图表。
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">CanvasJS 动态更新</title>
</head>
<body>
<h1>动态数据图表</h1>
<button id="updateButton">更新数据</button>
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<script>
let chart;
// 初始化图表
function initChart() {
chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "实时数据监控"
},
axisY: {
title: "数值",
includeZero: true
},
data: [{
type: "line",
dataPoints: generateData(10) // 初始数据
}]
});
chart.render();
}
// 生成随机数据
function generateData(count) {
let dataPoints = [];
for (let i = 0; i < count; i++) {
dataPoints.push({
x: i + 1,
y: Math.floor(Math.random() * 100) + 1
});
}
return dataPoints;
}
// 更新数据函数
function updateData() {
chart.options.data[0].dataPoints = generateData(10);
chart.render(); // 重新渲染图表
}
// 页面加载完成后执行
window.onload = function() {
initChart();
// 为按钮添加点击事件
document.getElementById("updateButton").addEventListener("click", updateData);
}
</script>
</body>
</html>
说明：
- 我们将图表对象
chart定义在全局作用域，以便在其他函数中访问。 initChart()函数负责创建和渲染初始图表。generateData()函数用于生成指定数量的随机数据点。updateData()函数是核心，它获取图表的第一个数据系列 (chart.options.data[0])，更新其dataPoints，然后调用chart.render()来刷新图表。- 使用
addEventListener为按钮绑定click事件，点击时触发updateData。
官方资源与进阶学习
CanvasJS 的官方文档是最好的学习资源。
- 官方文档：这是最重要的资源，包含了所有配置项的详细说明、类型和默认值。
- 图表示例库：这里有上百个不同图表类型的示例，你可以直接查看源码，复制修改，快速实现复杂效果。
- API 参考：列出所有可用的类、方法和属性，适合查阅。
- 论坛与支持：如果你遇到问题，可以在官方论坛提问，开发团队和社区会提供帮助。
CanvasJS 是一个功能强大且易于上手的图表库，通过这份教程，你应该已经掌握了：
- 如何快速创建一个基本图表。
- 理解
Chart,options,data,dataPoints等核心概念。 - 如何自定义图表的标题、坐标轴、数据系列、工具提示和图例。
- 如何实现动态数据更新。
建议你多去官方示例库逛逛,尝试复制和修改那些复杂的图表，这是提升技能最快的方法，祝你使用愉快！
