billboard.js 简单可重用的JavaScript图表库

billboard.js 简单可重用的JavaScript图表库

本文为译文,原文请阅读 github.com/naver/billbo

billboard.js 是一款基于D3图标库v4+版本的JavaScript图表库,具有简单可重用的特定。

“billboard” 这个名字来源于大名鼎鼎的 billboard chart。
该项目从 C3.js v0.4.11版本fork得到。
我们为什么决定启动billboard.js这个项目?

参考文档

下载并安装

用户可以直接从代码仓库下载dist文件或者通过npm安装。

用于开发的代码 (代码未压缩)

开发阶段,用户可以下载未压缩的文件。

最新版本

其他版本

用于生产发布的代码 (代码压缩)

生产发布阶段,用户可以下载压缩的文件。

最新版本

其他版本

Packaged版本 (包括了 D3.js)

Packaged版本并不是正式的官方发布版本。 只是为了方便处理‘billboard.js’的依赖。

用npm进行安装

用npm安装billboard.js.

$ npm install billboard.js

浏览器支持情况

基本上所有支持SVG的浏览器都支持。

Internet Explorer 9+ Chrome Latest Latest Firefox Latest Safari Latest iOS 8+ Android 4+

依赖

D3 (必须) 4+

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

<!-- 1) Load D3.js and billboard.js separately -->
    <!-- Load D3 -->
    <script src="https://d3js.org/d3.v4.min.js"></script>

    <!-- Load billboard.js with base style -->
    <link rel="stylesheet" href="billboard.css">
    <script src="billboard.js"></script>

<!-- 2) or Load billboard.js packaged with D3.js -->
    <link rel="stylesheet" href="billboard.css">
    <script src="billboard.pkgd.js"></script>
注意 如果从 C3.js 迁移, 请参考 迁移指南

基本使用示例

1) 创建图表容器

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

2) 生成图表所需选项

// generate the chart
var chart = bb.generate({
    bindto: "#chart",
    data: {
        type: "line",
        columns: [
            ["data1", 30, 200, 100, 400, 150, 250]
        ]
    }
});

// call some API
chart.load( ... );

如何开始开发 billboard.js ?

任何有兴趣为 billboard.js 贡献源码的工程师请遵照如下要求进行开发。

开发环境

1. Clone代码仓库

Clone billboard.js 代码仓库并安装所需的依赖模块。

# Create and move a folder.
$ mkdir billboard.js && cd billboard.js

# Clone the repository.
$ git clone https://github.com/naver/billboard.js.git

2. 安装依赖

npm 和 Yarn 都支持。

# Install the dependency modules.
$ npm install

# or
$ yarn

3. 构建

用 npm script 构建 billboard.js

# Run webpack-dev-server for development
$ npm start

# Build
$ npm run build

# Generate jsdoc
$ npm run jsdoc

完成完整的构建以后会生成两个文件夹。

  • dist 文件夹: 包含 billboard.jsbillboard.min.js
  • doc 文件夹: 包含 API 文档。文档首页地址 doc/index.html.

代码格式检查

请使用 ESLint 保证代码质量、保持统一的代码风格。这些规则Airbnb JavaScript Style Guide的基础上进行了一些修改。 可以通过在代码编辑器中设置进行代码格式检查或者通过命令行对代码进行格式检查。

$ npm run lint

测试

每当新建分支或者完成开发时,请运行 npm run test 命令,执行测试。然后才能推送代码到远程代码仓库。

$ npm run test

运行 npm run test 命令通过 Karma-runner 启动 Mocha 测试。

Bug报告

如果发现 bug, 请把问题贴在GitHub的 issues 页面上。

License证书

billboard.js 受到MIT license证书保护.

Copyright (c) 2017 NAVER Corp.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
编辑于 2017-07-08

文章被以下专栏收录

    定期推送资深工程师的原创文章,话题以前端为主,当然也会涉及到后端以及其它话题,重要的是一定都是原创。