c3.jsの円グラフで表示順を指定する

5437 ワード
C3 JavaScript d3 JavaScript テキストリンク

javascriptで簡単に様々なグラフを描画できるc3.jsですが、ちょっと躓いた部分を書いておきます。

公式

1.円グラフを描画する

html

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

js

var chart = c3.generate({
    data: {
        // iris data from R
        columns: [
            ['S', 10],
            ['M', 30],
            ['L', 60],
        ],
        type: 'pie'
    }
});

結果

これだけのコードで円グラフ書けるなんてすごい。
ただこの円グラフ、必ず数値が大きい順に並んでくれちゃいます。

今回躓いたのはこれを降順にしたい場合。

c3.jsにはorderオプションもあり、積み上げ棒グラフでは問題ないが円グラフの場合はこれが効かない。
（以下のように記述しても上の実行結果と変わらない）

var chart = c3.generate({
    data: {
        // iris data from R
        columns: [
            ['S', 10],
            ['M', 30],
            ['L', 60],
        ],
        type: 'pie',
        order: 'desc'
    }
});

さてどうするか、といろいろ試していたらorderオプションにnullを指定することで解決。

var chart = c3.generate({
    data: {
        // iris data from R
        columns: [
            ['S', 10],
            ['M', 30],
            ['L', 60],
        ],
        type: 'pie',
        order: null
    }
});

columnsに渡している順番に並んでくれましたね。