可重用的JavaScript图表库 - billboard.js

2017-06-08      1210      JavaScript
项目简介

billboard.js

billboard.js is a re-usable easy interface JavaScript chart library, based on D3 v4+.

The name "billboard" came from the famousbillboard chartwhich everybody knows.

Download and Installation

Download dist files from repo directly or install it via npm.

For development (Uncompressed)

You can download the uncompressed files for development

Latest

Specific version

Installation with npm

The following command shows how to install billboard.js using npm.

$ npm install billboard.js

Supported Browsers

Basically will work on all browsers which has SVG support.

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

Dependency

D3 (required)
4+

Load billboard.js after D3.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>

Note

For migration from C3.js, checkout the migration guide

Basic usage example

1) Create chart holder element

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

2) Generate chart with options

// 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( ... );

How to start developing billboard.js?

For anyone interested to develop billboard.js, follow the instructions below.

Development Environment

1. Clone the repository

Clone the billboard.js repository and install the dependency modules.

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

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

2. Install dependencies

npmandYarnare supported.

# Install the dependency modules.
$ npm install

# or
$ yarn

3. Build

Use npm script to build billboard.js

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

# Build
$ npm run build

# Generate jsdoc
$ npm run jsdoc

Two folders will be created after complete build is completed.

  • dist folder: Includes the billboard.js and billboard.min.js files.
  • doc folder: Includes API documentation. The home page for the documentation is doc/index.html .

Linting

To keep the same code style, we adopted ESLint to maintain our code quality. The rules are modified version based on Airbnb JavaScript Style Guide . Setup your editor for check or run below command for linting.

$ npm run lint

Test

Once you created a branch and done with development, you must perform a test runningnpm run testcommand before you push code to a remote repository.

$ npm run test

Running anpm run testcommand will start Mocha tests via Karma-runner .