Google Chart APIを使って折れ線グラフを書く方法

@iwasaki 2,263views 更新:2014年10月28日

まずはグラフを書き出す領域を用意します。

<div id="chart_div"></div>

Google Chart APIのJavascriptをロードします。

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type="text/javascript">
        google.load("visualization", "1.0", {packages:["corechart"]});
</script>

折れ線グラフの描画メソッドは下記の通り。 arrayには連想配列で項目名と数値のセットが入っている想定です。

        /**
         * グラフ表示
         */
        function drawChart(array) {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'days');
            data.addColumn('number', '売上高');
            var count = 0;
            var alphabet = "BCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
            for(var i = 0; i < alphabet.length; i++) {
              if(array[alphabet[i]+'1']){
                count++;
              }
            };
            data.addRows(count);
            for(var i = 0; i < alphabet.length; i++) {
              if(array[alphabet[i]+'1']){
                data.setValue(i, 0, array[alphabet[i]+'1']);
                data.setValue(i, 1, Number(array[alphabet[i]+'2']));
              }
            };
            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, {
                width: "100%",
                height: 300,
                legend: {position: 'top', maxLines: 2 }, #凡例をグラフ上部、最大2行で表示します。
                fontSize: 10,#フォントサイズが結構大きめなのでフォントサイズを小さくしておきます。
                pointSize: 3,#折れ線にポイントがないので、ポイントをプロットさせます。
                tooltip:{ textStyle: { fontSize: 8} },#ポイントをクリックした際に表示されるツールチップのフォントサイズは更に小さくしておきます。
                series: {
                    0:{color: '#003399'},
                    1:{color: '#cc3333'},
                },
                chartArea:{left:70,top:25,width:"100%",height:"70%"}#グラフの描画位置を調整します。左は売上高の数字がくるんで70ピクセル開けて、上部は凡例が来るので25ピクセルあけています。横幅は目一杯使いたいので100%に、何故か高さは100%にすると横軸が表示できなくなるので70%ていどにしておきます。
            });
        }

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

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

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