为何大多数人都从 D3.js 切换到了billboard.js？
为何大多数人都从 D3.js 切换到了billboard.js？
大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
今天给大家带来的主题是 billboard.js，话不多说，直接进入正题！
1.什么是 billboard.js
billboard.js 是一个基于 D3 v4+ 的强大、可重用、界面优雅的图表库，基于 JavaScript ，允许开发人员立即创建图表以可视化数据。
billboard.js 是原始流行图表库 C3.js 的分叉项目。而 C3.js 是基于 D3.js 开发的 JavaScript 库，它可以让开发者构建出可复用的图表，并且还提供了一系列图表上的交互行为。
通过 C3，只需要往 generate 函数中传入数据对象就可以轻松的绘制出图表，方便开发者使用。因此在早期，大多数开发者都使用 C3.js 库来绘制界面和使用复杂功能。
但是 C3.js 依赖于 D3.js，同时 C3.js 无法在最新版本的 D3.js（版本 4+）上运行。而且 D3.js 较之前的 v4 版本有了很大的改变，没有提供向后兼容性，而 billboard.js 的存在就是为了解决这些问题。
目前 billboard.js 在 Github 上通过 MIT 协议开源，有超过 5.6k 的 star、0.4k 的 fork、1.2k 的项目依赖量、NPM 周平均下载量 20k、代码贡献者 150+，是一个妥妥的前端优质开源项目。
2.billboard.js 介绍
2.1 billboard.js 特征
billboard.js 具有以下明显特征：
- 简单：图表生成非常简单， 通过丰富的选项，开发者可以立即创建图表
- D3 v4+ 兼容：billboard.js 适用于 D3 v4+
- 模块化：所有代码都是使用 ES6+ 语法编写为 ESM（ES 模块）
- 丰富的选项：billboard.js 结合数百种选项来满足开发者需求
2.2 billboard.js 与其他主流库的比较
库基础数据对比
从下图可以看出：
- 依赖维度上：billboard.js 是基于 D3 的 v4 版本，其他如 C3、nvd3 目前都基于 D3 的 v3 版本
- 体积上：目前 billboard.js 的体积是 169k，大于 chartist 的 39.3k 和 chartjs 的 154k，排名第三
- 其他维度上：如易用性、NPM 下载量、star 数等等，相比于老牌的绘图库还有一定的差距，但是未来可期。
billboard.js 的 npm 下载数据
从上图可以看出从 2023 年 7 月 4 号到 2023 年 7 月 10 号的数据，chart.js 依然一骑红尘、排名第二的是 highchart.js、接着就是 echarts、其他几个图标库虽然都不错，但是差距并不大。
3.使用 billboard.js 创建一个图表
首先，需要安装 billboard.js。 在本演示中，将使用 D3.js 和 billboard.js CDN 来使用该库并创建图表。
在空文件夹中创建一个名为 Chart.html 的文件并输入以下内容：
<!--chart.html -->
<!DOCTYPE html>
<title>billboard.js DEMO</title>
<head>
<!-- Load billboard.js css files via cdn -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css">
<!--Load D3.js -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- Load billboard.js via cdn -->
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
</head>
</html>下一步是在 HTML 文件中创建一个 div 来显示图表：
<body>
<div id="chart"></div>
</body>接着创建一个新文件，将其命名为 Chart.js，并粘贴以下内容：
// 该函数生成带有在其中指定的参数的图表。
bb.generate({
bindto: "#chart",
// Bindto 属性保存创建用于显示图表的 div 的 ID
// 轻松定位特定的 HTML 元素，而无需手动操作 DOM。
data: {
// columns 保存一个数组，其中包含要显示的数据的值和数据的名称
columns: [
["JavaScript", 30, 200, 100, 170, 150, 250],
["PHP", 130, 100, 140, 35, 110, 50],
],
// types 包含一个对象，其中包含想要用来显示数据的图表类型。
// 这个示例对于 JavaScript，使用“折线”图表类型，对于 PHP，使用“阶梯”图表类型。
types: {
JavaScript: "area-spline",
PHP: "step",
},
// colors 属性保存一个对象，其中包含希望数据显示的颜色类型
colors: {
JavaScript: "blue",
PHP: "green",
},
},
});接着，在 chart.html 文件中，注入 chart.js：
<body>
<div id="chart"></div>
<script src="YOUR_PROJECT_PATH/chart.js"></script>
</body>打开 Chart.html 文件时，会在浏览器中看到以下图表：
上面示例只是创建了一个图表来显示数据，billboard.js 还支持诸如：分类、图表主题等等诸多高级特性，在这里不再过多展开，可以继续阅读文末参考资料。
4.本文总结
本文主要和大家介绍 billboard.js ，即一个基于 D3 v4+ 的强大、可重用、界面优雅的图表库，基于 JavaScript ，允许开发人员立即创建图表以可视化数据。相信通过本文的阅读，大家对 billboard.js 会有一个初步的了解。
因为篇幅有限，关于 billboard.js 的用法和特性文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏，您的支持是我不断创作的动力。
参考资料
https://github.com/naver/billboard.js
https://naver.github.io/billboard.js/release/latest/doc/
https://www.section.io/engineering-education/nodejs-charts/
https://www.npmjs.com/package/billboard.js
https://github.com/naver/billboard.js/wiki/Comparison-table
