kakakakakku blog

Weekly Tech Blog: Keep on Learning!

dc.js で BarChart を描画するときにx軸とy軸のラベルを表示する

最近 dc.js - Dimensional Charting Javascript Library っていうライブラリに触れる機会があって,いろいろ試行錯誤しながら使ってみた.

公式サイトでグラフのデモがあるので,どんなリッチなグラフが描けるのかは見てもらった方が早いと思うけど,実際自分の思い描くような形にカスタマイズしていこうとすると,結構詰まる.そもそも僕のフロントサイド力が低いっていうのも影響してるとは思うけど,それでも調べながら試行錯誤する時間がかなり長かった.正直,未だによくわからんw

あと,StackOverflow が神すぎて,同じようなこと質問してる人がたくさんいて助かった.

棒グラフのx軸とy軸にラベルを付ける

グラフを描く上で絶対に必要だと思われるx軸とy軸のラベルだけど,dc.js - Dimensional Charting Javascript Library のデモにも, Crossfilter のデモにもなくて,一見できなさそうに思うけど,ドキュメントを見ると以下の関数が用意されている.

かなり簡略化して書くとこんな感じ.ちなみに padding に px を指定すると間隔を空けられるので,例えばy軸で桁数が大きくなる場合などに目盛りを見切れないようにできる.

dc.barChart("#xxx")
  .xAxisLabel("x軸")
  .yAxisLabel("y軸")

y軸のラベルとy軸の目盛り間にマージンを取る

上の対応でy軸のラベルを付けると,例えばこんな感じに描画が重なってしまう場合がある.

f:id:kakku22:20141005171839p:plain

.yAxisLabelpadding で解決できそうに思うけど,あくまで padding なので,ここは margin の設定が必要そうだということで,ドキュメントを見ると,以下の関数が用意されている.

同じく簡略化して書くとこんな感じ.実際には {left: 50} だけを設定していて,この値を調整すれば良い.その他は全てデフォルト設定なんだけど,明示的に書かないとうまく動かなかったのであえてそうしている.

dc.barChart("#xxx")
  .margins({top: 10, right: 50, bottom: 35, left: 50})

まとめ

とりあえず,荒削りではあるけど,描画の微調整が少し進んだ気がする.

関連エントリー

dc.js - Dimensional Charting Javascript Library
Crossfilter
How to add axis labels for row chart using dc.js or d3.js - Stack Overflow
javascript - dc.js sort ordinal line chart by y axis/value - Stack Overflow
javascript - Show values on top of bars in a barChart - Stack Overflow
Toshi's NoteBook: 多次元解析のためのチャートライブラリ DC.js