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

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

C3.js で JSON入力でドーナッツチャートを書きたい、でもExample¹にないから描けない（＞＜）なんてことありますよね。 ありますよね 。

こう書けばOKです。

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

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

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

以下を参考にしました

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

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

1. http://c3js.org/examples.html ↩