C3.jsで積み上げ横棒グラフ(帯グラフ)を描く
- 全体的にお世話になったサイト
- グラフの縦横を入れ替える
- ページ内での表示位置
- ソート順
- 軸の値を非表示にする
- 軸線と軸の値の両方を非表示にする
- 凡例を非表示にする
- チャートの色を指定する
- チャートの全体の大きさを指定する
- サンプルソース
全体的にお世話になったサイト
グラフの縦横を入れ替える
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より)