billboard.js 是一个可重用、易于使用的 JavaScript 图表库，基于 D3.js 开发。

"billboard" 这个名字来源于大家都熟知的 billboard 排行榜。 

为什么我们决定开发 billboard.js？

文档

API 文档
示例
路线图
贡献指南
开发指南
与其他库的比较表
从 C3.js 迁移指南
第三方应用
谁在使用 billboard.js
基准测试
技术细节：
- 如何为旧版浏览器打包？
- 如何在 Node.js 环境中生成图表图像？
- 在 Wiki 页面了解更多。
v2 更新：
- v2 更新日志
- 迁移到 v2 指南
v3 更新：
- billboard.js 3.0 发布：支持 D3.js v6 和新的蜡烛图类型！

有问题？

如果你有任何问题，可以查看之前的帖子或在以下地方创建新的问题：

支持的图表类型

下载和安装

直接从仓库下载 dist 文件或通过 npm 安装。

<details> <summary>从仓库获取的 Dist 文件列表。（点击展开）</summary>

用于开发（未压缩）

你可以下载未压缩的文件用于开发

特定版本

用于生产（压缩）

你可以下载压缩的文件用于生产

特定版本

打包版本（包含 D3.js）

⚠️ 打包版本不是官方发行版。它是为了提供一种简单的方式加载 'billboard.js' 及其依赖项。

</details>

主题

[!注意] 如果你想应用主题，只需加载提供的主题 css 文件之一，而不是默认的 css 文件。

截图预览

<details> <summary>从仓库获取的 Dist 主题文件列表。（点击展开）</summary>

datalab

dark

insight

graph

modern

</details>

每日构建版本

每日构建版本是来自 master 分支的最新构建。通过每日构建版本，你可以在正式发布之前尝试即将推出的更改。

https://github.com/naver/billboard.js/tree/nightly/dist

[!注意] 版本信息将以构建日期时间给出：x.x.x-nightly-yyyymmddhhmmss

有两种方法可以直接从 nightly 分支安装。

// 在 'package.json' 文件中指定
"dependencies": {
      ...
      "billboard.js": "naver/billboard.js#nightly"
},

# 从 shell 运行安装命令
$ npm install git+https://github.com/naver/billboard.js.git#nightly --save

下一版本（候选发布版本）

下一版本是最新正式版本之前的"候选发布"构建。

# 从 shell 运行安装命令
$ npm install billboard.js@next --save

使用 npm 安装

$ npm install billboard.js

包

名称	适用于	描述
		billboard.js 的 React 组件

使用 CDN

如果你想在不安装的情况下使用 'billboard.js'，可以直接从以下 CDN 提供商加载文件。

cdnjs: https://cdnjs.com/libraries/billboard.js
jsDelivr: https://cdn.jsdelivr.net/npm/billboard.js/dist/
unpkg: https://unpkg.com/billboard.js/dist/

支持的浏览器

[!重要]

基本上可以在所有支持 SVG 和 ES6+ 的浏览器上运行。

*对于旧版浏览器的注意事项：

建议使用 打包 构建或按照 如何为旧版浏览器打包？ 说明构建你自己的版本。

D3.js 从 v6 开始放弃了对旧版浏览器的支持。

不能完全保证支持。

各版本的依赖关系

D3.js (必需)	billboard.js
4.x ~ 5.x	1.x ~ 2.x
6.x+	3.x+

开始使用

在 D3.js 之后加载 billboard.js。

<!-- 1) 分别加载 D3.js 和 billboard.js -->
    <!-- 加载 D3: -->
    <script src="https://d3js.org/d3.v6.min.js"></script>

    <!-- 加载 billboard.js 及其基础（或主题）样式 -->
    <link rel="stylesheet" href="$YOUR_PATH/billboard.css">
    <script src="$YOUR_PATH/billboard.js"></script>

<!-- 2) 或加载打包了 D3.js 的 billboard.js -->
    <link rel="stylesheet" href="$YOUR_PATH/billboard.css">
    <script src="$YOUR_PATH/billboard.pkgd.js"></script>

或使用 ESM 导入。

[!提示] 📌 另请查看：如何直接从浏览器加载 ESM？

// 1) 导入 billboard.js
// 作为命名导入，包含所需的图形和交互模块
// https://github.com/naver/billboard.js/wiki/CHANGELOG-v2#modularization-by-its-functionality
import {bb, area, bar, zoom} from "billboard.js";

// 或作为默认导入
import bb, {area, bar, zoom} from "billboard.js";

// 2) 如果你的开发环境支持，导入 css。如果不支持，通过 <link> 引入
import "billboard.js/dist/billboard.css";

// 或主题样式。在 'theme' 文件夹中可以找到更多主题
import "billboard.js/dist/theme/insight.css"

[!注意]

对于从 C3.js 迁移，请查看迁移指南。

如果在为旧版浏览器打包时遇到问题，请查看"如何为旧版浏览器打包？"。

基本使用示例

1) 创建图表容器元素

<div id="chart"></div>

2) 使用选项生成图表

// 生成图表
var chart = bb.generate({
    bindto: "#chart",
    data: {
      // 对于 ESM 导入用法，导入 'line' 模块并执行它，如
      // type: line(),
      type: "line",
      columns: [
          ["data1", 30, 200, 100, 400, 150, 250]
      ]
    },
    zoom: {
      // 对于 ESM 导入用法，导入 'zoom' 模块并执行它，如
      // enabled: zoom()
      enabled: true
    }
});

// 调用一些 API
chart.load( ... );

许可证

billboard.js 基于 MIT 许可证发布。

版权所有 (c) 2017 ~ 现在 NAVER Corp.

特此免费授予任何获得本软件及相关文档文件（"软件"）副本的人不受限制地处理本软件的权利，
包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件副本的权利，
以及允许向其提供本软件的人这样做，但须符合以下条件：

上述版权声明和本许可声明应包含在本软件的所有副本或主要部分中。

本软件按"原样"提供，不附带任何明示或暗示的担保，包括但不限于适销性、特定用途适用性和非侵权性的担保。
在任何情况下，作者或版权持有人均不对任何索赔、损害或其他责任负责，
无论是在合同诉讼、侵权行为还是其他方面，
均由软件或软件的使用或其他交易引起或与之相关。