Google Chart APIで棒グラフを描画する方法

@iwasaki 27views 更新:2016年10月3日

縦表示の棒グラフにする場合は、

google.visualization.ColumnChart

を使用します。

https://developers.google.com/chart/interactive/docs/gallery/columnchart

横表示の場合は

google.visualization.BarChart

になります。

https://developers.google.com/chart/interactive/docs/gallery/barchart

オプションで

isStacked: true

を指定することで、積み上げた表示形式になります。

https://developers.google.com/chart/interactive/docs/gallery/columnchart#stacked-column-charts

            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            var data = transpose(response.getDataTable());

            chart.draw(data, {
                width: "100%",
                height: 300,
                legend: {position: 'top', maxLines: 2},
                fontSize: 10,
                pointSize: 3,
                tooltip: {textStyle: {fontSize: 8}},
                chartArea: {left: 70, top: 25, width: "100%", height: "70%"},
                isStacked: true
            });

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません