Highchartsことはじめ

11980 ワード
highcharts データビジュアライゼーション highcharts テキストリンク

はじめに

データビジュアライゼーションに興味を持ったため、色々調べてみたところ
以下のようなライブラリが多く使用されているとのことでした。

  • d3.js
  • Charts.js
  • Highcharts

この記事では、Highchartsについて環境構築からサンプルグラフの描画までを紹介します。

対象者

  • Highchartsを触ったことがない
  • データビジュアライゼーション初心者
  • 環境構築からサンプルグラフの表示までをとりあえずしてみたい

実行環境

  • Windows 10
  • Google Chrome

インストール

今回は簡易版のため、HTMLファイルに直接参照先を記載します。
そのため、環境構築やインストールは不要です。
ブラウザとHTMLファイルのみ使用します。

データ

直近6日の各地域における気温の変化を折れ線グラフで表示します。

データは気象庁からcsv形式でダウンロードします。
https://www.data.jma.go.jp/gmd/risk/obsdl/index.php

data.csv
ダウンロードした時刻：2020/03/26 09:13:48,,,,
,,,,
,大阪,京都,那覇,札幌
年月日,平均気温(℃),平均気温(℃),平均気温(℃),平均気温(℃)
,,,,
2020/3/20,12.8,12.1,19.5,6.2
2020/3/21,13.6,12.8,21.2,6.6
2020/3/22,14.9,13.9,23.7,5.9
2020/3/23,12.3,11.6,22.2,2.6
2020/3/24,10.1,8.4,20.8,1.9
2020/3/25,11,9.9,21.5,4.9

HTML

HTMLファイルの中身です。
タイトルや縦軸、凡例の設定をしていきます。
seriesにcsvデータ中の身を記入しています。

<html>

<head>
    <meta charset="UTF-8" />
    <title>Highcharts temp sample</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>

<body>
    <div id="container" style="width: 680px; height: 550px; margin: 0 auto"></div>
    <script language="JavaScript">
        window.onload = function () {
            Highcharts.chart('container', {
                // グラフ属性設定
                // 各属性の詳細：https://api.highcharts.com/highcharts/

                //グラフタイトル
                title: {
                    text: '2020/3/20~2020/3/25の平均気温の推移'
                },

                //横軸の表題
                xAxis: {
                    categories: ['2020/3/20', '2020/3/21', '2020/3/22', '2020/3/23', '2020/3/24', '2020/3/25']
                },

                //縦軸の設定
                yAxis: {
                    title: {
                        text: '気温[℃]'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },

                //ツールチップ
                tooltip: {
                    valueSuffix: '℃'
                },

                //凡例位置
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },

                //データの生成
                series: [
                    {
                        name: '大阪',
                        data: [12.8, 13.6, 14.9, 12.3, 10.1, 11]
                    },
                    {
                        name: '京都',
                        data: [12.1, 12.8, 13.9, 11.6, 8.4, 9.9]
                    },
                    {
                        name: '那覇',
                        data: [19.5, 21.2, 23.7, 22.2, 20.8, 21.5]
                    },
                    {
                        name: '札幌',
                        data: [6.2, 6.6, 5.9, 2.6, 1.9, 4.9]
                    }
                ],

                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 600
                        },
                        chartOptions: {
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                verticalAlign: 'bottom'
                            }
                        }
                    }]
                }
            });
        }
    </script>
</body>

</html>

結果

グラフが表示されます。
マウスカーソルをグラフ上に持っていくと、ツールチップが表示されます。

参考

https://www.highcharts.com/docs/getting-started/your-first-chart
https://qiita.com/ponsuke0531/items/3254dc0bad1655199827