LoginSignup
5
7

More than 5 years have passed since last update.

C3.jsで入力がjsonのときのdonut chartの書き方

Posted at

この記事はACCESS Advent Calendar 6日目の記事です。
こんにちは ACCESS開発本部IoT開発部の加藤 (@aKenjiKato ) です。

C3.js で JSON入力でドーナッツチャートを書きたい、でもExample1にないから描けない(><)なんてことありますよね。 ありますよね

こう書けばOKです。

// データ
// [{"key": value, ...}]で書く
var data = [{"あーりん": 20, "あーりんロボ": 80}];

c3.generate({
  data: {
    json: data,
    keys: {
      // dataに含まれるObjectのentryのうち、描画の対象としたいentryのkeyを指定する
      value: ["あーりん", "あーりんロボ"]
    },
    type: "donut"
  }
});

スクリーンショット 2015-12-05 20.29.23.png

以下でお試しください
http://jsfiddle.net/unhynfoj/3/

以下を参考にしました

https://github.com/masayuki0812/c3/issues/430
http://jsfiddle.net/hQSSn/3/

明日も @aKenjiKato です。
よろしくお願いいたします。

5
7
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
5
7