Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

toriniku
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away