はじめに
様々なグラフを少ないJavaScriptのコードで実現できるGoogle Chart。ですが、簡単なことはオプションを多少いじるだけで解決できるかもしれませんが、ちょっと複雑なことをやろうとすると悩んでしまうこともしばしば。結局何度も同じことをググってるのもしばしばなので、自分のためにもまとめておこうと思った次第です。
公式ドキュメントやStackOverFlowを読むと大体載ってはいますが、1から読み込んでいくのは少ししんどいという人のために特にハマったポイントをまとめてみました！
前提
- 主にバーチャートについてです。(Bar Chart, Column Chart)
- 少しはGoogle Chartを触ったことある人向けです。
- CoffeeScriptで書いてます。
レーダーチャートが実現したいんだけど…
Google Chartだと無いのでChart.jsで実装してました。
Android2.3で見れない…
Google ChartはAndroid2.3に対応していません。SVG形式で出力されるからですね。StackOverFlowに載っているのも色々見て試行錯誤したものの、結局実装できず。
なので、これもバージョンによって条件分けてChart.jsで実装しました。
x軸の値が少数値になってしまう。%に変換したい！
x軸の値が0.2, 0.4のように表示されてしまうけど本当は20%, 40%と表示したい時ありますよね。
そういうときは、
format: "#%" をhAxisに指定してあげればOKです。
x軸の基準値を設定したいんだけど…
0%,20%,40%,60%,80%,100%みたいな区切りにしたいときがあるかと思います。
そういうときはticksを使いましょう。
ticks: [0, 0.2, 0.4, 0.6, 0.8, 1.0]
みたいにすればOKですね。これもhAxisに指定してあげればOK
y軸の文字が切れて「…」になってしまう！
chartArea属性のleftを指定すればOKです。
逆にx軸の文字が切れてしまう！
- チャート自体のwidthを大きく変更するか、chartAreaのwidthを大きくすることで対応。
枠の外にannotationを出したい！
annotations:
alwaysOutSide: true
でOK
縦軸の横線表示したくない…
baselineColor: "transparent" # はじめの線を削除
gridlines:
color: "transparent"
でOK！横軸も同様。
縦軸の目盛線表示したくない…
textPosition: "none"
でOK。
x軸を90度回転させたい！
hAxis:
slantedTextAngle: 90
でいけます。意外にはじめは悩みました…。
バーの上にラベルを出したい！
data_table = google.visualization.arrayToDataTable(data)
view = new google.visualization.DataView(data_table)
view.setColumns(
[
0,1,
{
calc: (dt, row) ->
if dt.getValue(row, 1) == 0
return
else
str = JSON.stringify("#{(dt.getValue(row, 1))}")
return JSON.parse(str)
sourceColumn: 1,
type: "string",
role: "annotation"
}
]
こんなかんじでできる。0の場合はreturnされるようにしている。
また棒グラフの数が動的に変わる時も以下の様な感じで対応した。
# label(100%など)をbar_chartの上に表示
# 下の形式
# [
# 0,1,
# { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" },
# 2,
# { calc: "stringify", sourceColumn: 2, type: "string", role: "annotation" },
# 3,
# { calc: "stringify", sourceColumn: 3, type: "string", role: "annotation" },
# 4,
# { calc: "stringify", sourceColumn: 4, type: "string", role: "annotation" }
# ]
#
labelData = [0]
# option_numは個数に合わせて変化(引数で指定する)
for i in [1..option_num]
do (i) ->
labelData.push(i,
{
sourceColumn: i,
type: "string",
role: "annotation"
calc: (dt, row) ->
if dt.getValue(row, i) == 0
return
else
str = JSON.stringify("#{Math.round((dt.getValue(row, i)) * 100)}%")
return JSON.parse(str)
}
)
view.setColumns(labelData)
これだと動的に0%の時は表示されなくなるし、その他の場合はラベルで20%、みたいな感じで出るようになっている。
終わりに
日本語のまとめが少なく意外にハマるところが多いので自分用まとめも兼ねてまとめました。参考になれば幸いです。