首页

当前位置：网站首页 > 技术文章 > 正文

为何大多数人都从 D3.js 切换到了billboard.js?

myzbx 2025-05-30 16:26 34 浏览

大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

今天给大家带来的主题是 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

D3.js

上一篇：前端实现知识图谱-force(d3.js)
下一篇：可视化大屏设计秘籍:功能布局配色全方位解读，新手也能轻松上手

为何大多数人都从 D3.js 切换到了billboard.js?

1.什么是 billboard.js

2.billboard.js 介绍

2.1 billboard.js 特征

2.2 billboard.js 与其他主流库的比较

库基础数据对比

billboard.js 的 npm 下载数据

3.使用 billboard.js 创建一个图表

4.本文总结

参考资料

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿