8
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-09-26

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

##公式
http://c3js.org/

##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に渡している順番に並んでくれましたね。

8
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?