好きなときに好きなことをしたいブログ

好きなときに好きなことをしたい性格です。

C3.jsで積み上げ横棒グラフ(帯グラフ)を描く

 

全体的にお世話になったサイト

jsfiddle.net

グラフの縦横を入れ替える

axis: {rotated: false}

上の行を入れておくと、縦棒グラフが横棒グラフになる。

ページ内での表示位置

「bindto:」で指定。
【JavaScript】C3.js 〜 基本文法 / 構文編 〜 ( ソフトウェア ) - プログラム の個人的なメモ - Yahoo!ブログより)

ソート順

「order:」で指定。
降順とか昇順ではなく、こちらで指定した順序にしたい場合、
データ定義をその順番で記述しておき、orderにはnullを指定する。
c3.jsの円グラフで表示順を指定する - Qiitaより)

軸の値を非表示にする

tick: { values: [] }, // 軸の値を非表示
簡単にリッチなチャートが作れるC3.jsを使ってみた - undefinedより)

軸線と軸の値の両方を非表示にする

show: false
(参考文献なし。自力で解決)

凡例を非表示にする

legend: { show: false }
ビジュアライズ忘年会(C3.jsで大きな文字を表示してみた) - Qiitaより)

チャートの色を指定する

color: { pattern: ['#カラーコード', '#カラーコード', … , '#カラーコード'] }
簡単にリッチなチャートが作れるC3.jsを使ってみた - undefinedより)

チャートの全体の大きさを指定する

size: { width: 数字, height: 数字}
簡単にリッチなチャートが作れるC3.jsを使ってみた - undefinedより)

サンプルソース

anything.hatenadiary.com

anything.hatenadiary.com