jQuery無しでキレイなグラフを描けるC3.jsを試してみた

2017年10月29日

グラフ系のライブラリって色々ありますよね。

今回はjQuery無しでもキレイなグラフを描けるC3.jsを紹介したいと思います。

導入方法

ダウンロード

公式サイトにアクセスして、ソースファイルをダウンロードしてください。
[box class=”red_box” title=”ダウンロードについて”]ちょっとダウンロードがわかりにくいところにあります。
「Getting Start」→　Download the latest version here:のリンクをクリックするとGitHubのページに移動します。
そこで「Source code (zip)」をダウンロードしてください。[/box]

ダウンロードしたzipファイルを展開して、c3.min.cssとc3.min.jsを適当なディレクトリに配置しましょう。

コード

一番簡単な折れ線グラフを表示するコードを紹介します。

まずライブラリを読み込みます。
この時C3.jsだけでなく、D3.jsを読み込む必要があります。

<!-- C3.jsのCSS読み込み -->
<link rel="stylesheet" href="script/c3.min.css">
<!-- D3.js読み込み（必須です） -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- C3.js読み込み -->
<script src="script/c3.min.js"></script>

グラフを表示するDivタグを設定します。

<!-- グラフを表示するDivタグ-->
<div id="chart"></div>

折れ線グラフを表示するスクリプトを記述。

var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ]
    }
});

[btn class=”rich_pink”]デモ確認[/btn]

代表的なグラフ

typeを指定することで、グラフの種別を変えることができます。

折れ線グラフ

var line_chart = c3.generate({
    bindto: '#line_chart',
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ]
    }
});

ステップチャート

var step_chart = c3.generate({
    bindto: '#step_chart',
    data: {
        columns: [
            ['data1', 300, 350, 300, 0, 0, 100],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        types: 'step'
    }
});

エリアチャート

var area_chart = c3.generate({
    bindto: '#area_chart',
    data: {
        columns: [
            ['data1', 300, 350, 300, 0, 0, 0],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        type:'area',
    }
});

棒グラフ

var bar_chart = c3.generate({
    bindto: '#bar_chart',
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        type: 'bar'
    }
});

円グラフ

var pie_chart = c3.generate({
    bindto: '#pie_chart',
    data: {
        columns: [
            ['data1', 30],
            ['data2', 120],
        ],
        type: 'pie',
    }
});

ドーナツグラフ

var donut_chart = c3.generate({
    bindto: '#donut_chart',
    data: {
        columns: [
            ['data1', 30],
            ['data2', 120],
        ],
        type: 'donut',
        
    },
    donut: {
        title: "ドーナツグラフタイトル"
    }
});

ゲージグラフ

var gauge_chart = c3.generate({
    bindto: '#gauge_chart',
    data: {
        columns: [
            ['data', 91.4]
        ],
        type: 'gauge',
        
    },
    gauge: {
    },
    color: {
        //ゲージのカラー設定
        pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], 
        //ゲージのカラー設定。指定の数値を超えると色が変わる
        //30以上：#FF0000、60以上：#F97600、90以上:#F6C600、100以上：#60B044
        threshold: {
            values: [30, 60, 90, 100]
        }
    },
    size: {
        height: 180
    }
});

[btn class=”rich_pink”]デモ確認[/btn]