[Highcharts]棒グラフの太さはpointWidthで調整できる


[Highcharts]棒グラフの太さはpointWidthで調整できる


Highcharts:棒グラフ編集前

WEBサイト上に綺麗なグラフを描画する為のJavaSprictライブラリ「Highcharts」。グラフの豊富さとカスタマイズの細かさから、サイトデザインに合ったグラフを描画することができます。
日本語の公式チュートリアルが無いので、今回は棒グラフの幅を調整するための方法をご紹介ます!

スポンサーリンク

Highchartsグラフのカスタマイズ、どうすればいいの??

Highcharts
Highchartsは細かいカスタマイズに対応できるのですが、細かすぎて分からない・・・な方も多いはず。
英語でのリファレンスはあるのですが、欲しい情報はどこなのー?な人向けの記事です。
今回の記事は、Highchartsを導入した事があり、ある程度分かっている人向けの記事です。
これから使う予定の人は、導入方法がこちらに。

縦棒グラフの横幅を調整したい

通常グラフの描画領域に応じて、Highchartsの方でバランスよく調整してくれます。
こんな感じで。
Highcharts:複合グラフ完成形
しかし、描画領域に対してデータ数が少ない場合は、物凄く太い棒グラフになってしまいます。
Highcharts:棒グラフ編集前
これを調整する為には、plotOptionsに指定します。

plotOptionsはグラフの見栄えを調整する事ができるオプションです。ここで棒グラフ(column)のサイズについても調整できます。

plotOptionsの中にseriesを加えてpointWidthで幅を指定します。ここでは50としていますが、ブラウザで確認しながら任意の幅に調整して下さい。
pointWidth指定後はこちら。
chart2
お試しあれ。

和風デザイン勉強会