billboard.jsグラフライブラリの使用方法

Intro

billboard.jsとは何ですか。

使用方法

Step 1. Load billboard.js and D3.js

<!-- Step 1) Load D3.js -->
<script src="https://d3js.org/d3.v6.min.js"></script>

<!-- Step 2) Load billboard.js with style -->
<script src="$YOUR_PATH/billboard.js"></script>

<!-- Load with base style -->
<link rel="stylesheet" href="$YOUR_PATH/billboard.css">

<!-- Or load different theme style -->
<link rel="stylesheet" href="$YOUR_PATH/theme/insight.css">

Step 2. Setup your chart holder

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

Step 3. Generate a chart with options

var chart = bb.generate({
    bindto: "#chart",
    data: {
        type: "bar",
        columns: [
            ["data1", 30, 200, 100, 170, 150, 250],
            ["data2", 130, 100, 140, 35, 110, 50]
        ]
    }
});

例

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

bb.generate({
    bindto: "#chart",
    data: {
        columns: [
            ["data1", 30, 200, 100, 170, 150, 250],
            ["data2", 130, 100, 140, 35, 110, 50]
        ],
        types: {
          data1: "line",
          data2: "area-spline"
        },
        colors: {
          data1: "red",
          data2: "green"
        }
    }
});