Skip to content
← 返回 hands-on-data-visualization
← 返回 hands-on-data-visualization

ch-0012 Chapter 11: Chart.js and Highcharts Templates

  • 原书章节: Chapter 11 Chart.js and Highcharts Templates（pp. 295–310）
  • 输入来源: 本地 pdf（HandsOnDataViz.pdf）

摘要

本章用两个流行的 JavaScript 图表库做可定制的交互式图表模板：Chart.js（MIT 许可证，可商用）与 Highcharts（仅限非商业免费使用）。模板设计为"零代码"使用： fork 到自己的 GitHub → 替换数据文件 → 发布即出图；代码-好奇者还可以直接改 JS。

  • 为什么用代码库而非拖拽工具：定制自由度更高（颜色、内边距、交互、数据处理）， 且开源工具不受第三方平台免费策略/条款变动影响
  • 模板清单（Table 11.1）：bar/column chart、error bars（误差棒）、line chart、 annotated line chart（Highcharts，注释图）、scatter chart、bubble chart
  • 数据来源：模板支持 CSV 文件与 Google Sheets 两种数据加载方式（教程以 CSV 为例）
  • 要点：折线图纵轴不必从零开始（与柱状图不同）；多条序列用图例区分颜色；误差棒用于 展示不确定度（衔接 ch-0006 的 margin of error）

要点归纳

  • Chart.js vs Highcharts 的核心差异是许可证：MIT（可商用）vs 非商业免费——商用 项目首选 Chart.js
  • 模板 = 改数据 + 改 EDIT here 注释处 → GitHub Pages 托管 → iframe 嵌入（衔接 ch-0010、ch-0011）
  • 柱状图零基线是硬规则，但折线图纵轴可以不从零开始（两者规则不同，见 ch-0007）
  • 不确定度（margins of error）建议用 error bars 呈现
  • 官方资源：Chart.js Samples/Docs、Highcharts Demos/API Reference

术语 / 概念

  • Chart.js — MIT 许可的开源 JavaScript 图表库（可商用）
  • Highcharts — 功能丰富的图表库，免费仅限非商业项目
  • JavaScript library（JS 库） — 可复用的 JS 代码集合；配合 HTML/CSS 出图
  • annotation（注释） — 在图上标注文字/事件，用于强调要点（Highcharts 模板特性）
  • error bars（误差棒） — 表示数值不确定范围（ch-0007 已定义，此处给代码实现）

原句摘录

...it allows for greater customization in terms of colors, padding, interactivity, and data handling than most third-party tools can offer.

Highcharts comes with a stricter license which allows it to be used for free for non-commercial projects only... we primarily focus on Chart.js, which is distributed under MIT license that lets you use the library for commercial projects as well.

疑问 / 待查

  • 模板中 CSV 与 Google Sheets 两种数据加载的代码差异，实操时对照官方模板
  • D3.js 等更底层库不在本书范围（Preface 已声明），如需深度定制另学
Backlinks (1) 
flowchart LR
  n0["ch-0001 Introduction（为什么做数据可视化）"]
  n1["ch-0002 选工具讲你的数据故事（Ch 1）"]
  n2["ch-0003 强化电子表格技能（Ch 2）"]
  n3["ch-0004 找到并质询你的数据（Ch 3）"]
  n4["ch-0005 清洗脏数据（Ch 4）"]
  n5["ch-0006 做有意义的比较（Ch 5）"]
  n6["ch-0007 图表化你的数据（Ch 6）"]
  n7["ch-0008 地图化你的数据（Ch 7）"]
  n8["ch-0009 表格化你的数据（Ch 8）"]
  n9["ch-0010 嵌入网页（Ch 9）"]
  n10["ch-0011 用 GitHub 编辑与托管代码（Ch 10）"]
  n11["ch-0012 Chart.js 与 Highcharts 模板（Ch 11）"]
  n12["ch-0013 Leaflet 地图模板（Ch 12）"]
  n13["ch-0014 转换你的地图数据（Ch 13）"]
  n14["ch-0015 识别谎言、减少偏差（Ch 14）"]
  n15["ch-0016 讲述并展示你的数据故事（Ch 15）"]
  n16["ch-0017 附录 A 排查常见问题"]
  n17["Hands-On Data Visualization（整理完成）"]
  n18["Hands-On Data Visualization 笔记"]
  n19["Reading"]
  n17 --> n0
  n17 --> n1
  n17 --> n2
  n17 --> n3
  n17 --> n4
  n17 --> n5
  n17 --> n6
  n17 --> n7
  n17 --> n8
  n17 --> n9
  n17 --> n10
  n17 --> n11
  n17 --> n12
  n17 --> n13
  n17 --> n14
  n17 --> n15
  n17 --> n16
  n17 --> n18
  n19 --> n17
  click n0 "../ch-0001/" "ch-0001 Introduction（为什么做数据可视化）"
  click n1 "../ch-0002/" "ch-0002 选工具讲你的数据故事（Ch 1）"
  click n2 "../ch-0003/" "ch-0003 强化电子表格技能（Ch 2）"
  click n3 "../ch-0004/" "ch-0004 找到并质询你的数据（Ch 3）"
  click n4 "../ch-0005/" "ch-0005 清洗脏数据（Ch 4）"
  click n5 "../ch-0006/" "ch-0006 做有意义的比较（Ch 5）"
  click n6 "../ch-0007/" "ch-0007 图表化你的数据（Ch 6）"
  click n7 "../ch-0008/" "ch-0008 地图化你的数据（Ch 7）"
  click n8 "../ch-0009/" "ch-0009 表格化你的数据（Ch 8）"
  click n9 "../ch-0010/" "ch-0010 嵌入网页（Ch 9）"
  click n10 "../ch-0011/" "ch-0011 用 GitHub 编辑与托管代码（Ch 10）"
  click n11 "./" "ch-0012 Chart.js 与 Highcharts 模板（Ch 11）"
  click n12 "../ch-0013/" "ch-0013 Leaflet 地图模板（Ch 12）"
  click n13 "../ch-0014/" "ch-0014 转换你的地图数据（Ch 13）"
  click n14 "../ch-0015/" "ch-0015 识别谎言、减少偏差（Ch 14）"
  click n15 "../ch-0016/" "ch-0016 讲述并展示你的数据故事（Ch 15）"
  click n16 "../ch-0017/" "ch-0017 附录 A 排查常见问题"
  click n17 "../" "Hands-On Data Visualization（整理完成）"
  click n18 "../notes/" "Hands-On Data Visualization 笔记"
  click n19 "../../" "Reading"