ギリギリジンジン

なんでもギリギリだ。

Highcharts入門


--広告--

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

  • 作者:Ethan Brown
  • 発売日: 2017/01/20
  • メディア: 単行本(ソフトカバー)


ライセンス取得

商用利用は有償。 Developer License : 535ドル / 96,700円

Non-Commercial License は、無料のライセンス。取得にはフォーム申請が必要。個人のサイト、学校のサイト、非営利団体、購入前の試用は利用可能。フォーム申請すると即時メールが返ってきてライセンス取得できる。Creative Commons Attribution-NonCommercial 3.0 が適用される。

ロード

参考:Installation | Highcharts.com

Highchartsのロード

<script src="https://code.highcharts.com/highcharts.js"></script>

Highcharts Stockのロード
Highcharts Stock(highstock.js)にはHighcharts(highcharts.js)が含まれているので、両方をロードする必要はない。

<script src="https://code.highcharts.com/stock/highstock.js"></script>

Highcharts Maps
highmaps.jsのロードは不要だが、highmaps.jsには完全なhighcharts.jsは含まれていない。

<script src="https://code.highcharts.com/stock/highmaps.js"></script>

同時利用
同じページでhighcharts.jsと他のライブラリも必要な場合は、モジュールとしてロードする。

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>

最初のグラフ

参考:Your first chart

このグラフを作成してみよう。
ちなみに、Non-Commercial License なので右下にうっすらとHighchart.comと表示されている。

グラフの種類を選び値をセットしているだけだが、グラフにマウスを合わせると値を示したり、判例にマウスオーバーするとその人のグラフだけハイライトしたりもする。

f:id:grgrjnjn:20200918111913p:plain
Your first chart

divタグにidとサイズを指定。

<body>
<div id="container" style="width:100%; height:400px;"></div>
</body>

グラフの初期化。上記のdivタグはidのcontainerで参照し、Highchartsのコンストラクタ(初期化)で使われている。

<head>
<script src="https://code.highcharts.com/highcharts.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
        var myChart = Highcharts.chart('container', {
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Fruit Consumption'
            },
            xAxis: {
                categories: ['Apples', 'Bananas', 'Oranges']
            },
            yAxis: {
                title: {
                    text: 'Fruit eaten'
                }
            },
            series: [{
                name: 'Jane',
                data: [1, 0, 4]
            }, {
                name: 'John',
                data: [5, 7, 3]
            }]
        });
    });
</script>
</head>

テーマの入手と適用

参考:Your first chart

好みに応じてテーマを設定することで見栄えを変えることができる。
grayテーマを適用してみよう。

f:id:grgrjnjn:20200918121802p:plain
テーマ適用

テーマはCDNでは提供されていないようなので、ダウンロードして利用する。highcharts.jsロードの直後に設定する。

Non-Commercial Licenseの通知メールからダウンロードページに遷移して Highcharts-8.2.0.zip をダウンロード、解凍して入手するのが正しい入手経路ではないかと思うが、Githubのこちらのページからも入手可能。

<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="js/themes/gray.js"></script>

オプション設定

参考:How to set options

グラフ表示のオプションはJavaScriptオブジェクトを使用して、次のように書ける。renderToにdivタグはidのcontainerを指定している。

var options = {
    chart: {
        renderTo: 'container',
        type: 'bar'
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }]
};

コンストラクタ Highcharts.Chart を呼び出し初期化するときに、オプションを設定する。

var chart = new Highcharts.Chart(options);

options作成後に設定の追加(メンバーの追加)をすることも可能。上記の例で作ったオブジェクトならば、options.series は配列なので、pushメソッドを持っている。

options.series.push({
    name: 'John',
    data: [3, 4, 2]
})

JavaScriptの便利なところは、ドット記法と角括弧記法が等価なので、すべてのメンバーに文字列名でアクセスできるところ。つまり、options.chart.renderTo と options['chart']['renderTo'] は等価となる。

グローバル・オプション

同じページのすべてのチャートにオプションのセットを適用したい場合は、以下のように Highcharts.setOptions を使用する。

Highcharts.setOptions({
    chart: {
        backgroundColor: {
            linearGradient: [0, 0, 500, 500],
            stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(240, 240, 255)']
            ]
        },
        borderWidth: 2,
        plotBackgroundColor: 'rgba(255, 255, 255, .9)',
        plotShadow: true,
        plotBorderWidth: 1
    }
});
var chart1 = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
    },
    xAxis: {
        type: 'datetime'
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 3600 * 1000 // one hour
    }]
});
var chart2 = new Highcharts.Chart({
    chart: {
        renderTo: 'container2',
        type: 'column'
    },
    xAxis: {
        type: 'datetime'
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 3600 * 1000 // one hour
    }]
});

Highchartsを理解する

参考:Understanding Highcharts

Highchartsを理解するには、グラフのさまざまな部分と概念を理解することが重要となる。
以下にグラフの主な概念を説明する。

f:id:grgrjnjn:20200918154157p:plain

タイトル(title)とサブタイトル(subtitle)

参考:Title and subtitle / title / subtitle / setTitle

グラフは標準ではグラフの上部に表示され、オプションでその下にサブタイトルを表示することもできる。

var options = {
    title: {
        text: 'タイトル'
    },
    subtitle: {
        text: 'サブタイトル'
    }
}

align, float, margin, verticalAlignなどのオプションを指定することもできる。

var options = {
    title: {
        text: 'タイトル',
        algin: 'left'
    },
    subtitle: {
        text: 'サブタイトル'
        algin: 'left'
    }
}

また、後から動的に変更することも可能。

$('#color').click(function () {
    chart.setTitle(
        { style: { color: 'red' } },
        { style: { color: 'green' } }
    );
});
シリーズ(Series)

参考:Series

シリーズは系、系列という意味、適切な訳がわからないのでシリーズとする。シリーズとは、1つのデータセットで、1つの折れ線グラフや1つの列を表す。グラフにプロットされたすべてのデータはシリーズを使用している。

データの表現方法(データ構造)には3つの方法がある。

1.配列
数値の配列。数値はYの値となる。Xの値は0から1ずつ増えていくか、pointStartオプションおよびpointIntervalオプションから自動計算される。もし軸にカテゴリーがあればそれが使われる。

data: [0, 5, 3, 5]

2.配列の配列
2つの値をもつ配列の配列。最初の値はXの値で、2つ目の値はYの値となる。最初の値が文字列の場合はポイントの名前として使用され、Xの値は1ずつ増えていくか、pointStartオプションおよびpointIntervalオプションから自動計算される。(arearangeなど一部のシリーズは3つ以上の値を持つ。)

data: [[5, 2], [6, 3], [8, 2]]

3.連想配列の配列
名前付き値の配列。これは、options.point で見たようなポイント設定オブジェクトとなる。name属性はグラフや凡例の上にカーソルを合わせると表示される。

Highcharts Stock でこのオプションを使用するには、ポイントの総数が turboThreshold を超えてはならない、または turboThreshold の設定を増やす必要がある。

data: [{
    name: 'Point 1',
    color: '#00FF00',
    y: 0
}, {
    name: 'Point 2',
    color: '#FF00FF',
    y: 5
}]
ツールチップ(Tooltip)

参考:Tooltip

グラフ上のシリーズやポイントにカーソルを合わせると、チャートの特定の部分の値を説明するツールチップが表示される。

f:id:grgrjnjn:20200918203321p:plain
Tooltip

凡例(Legend)

参考:Legend

凡例は、定義されたシンボルとシリーズの名前をグラフに表示する。凡例にマウスを合わせるとシリーズを強調する。凡例をクリックすることでシリーズを有効にしたり無効にしたりできる。

f:id:grgrjnjn:20200918205733p:plain
Legend

軸(Axes)

参考:Axes

グラフのX軸とY軸は、異なるデータに対して複数の軸を用意することもできる。ほとんどのグラフは軸を持っているが、円グラフには軸がない。

f:id:grgrjnjn:20200918215604p:plain
Axes

ラベル(Labels)
軸のラベル(Axis labels)は、フォーマッタ機能を使用してカスタマイズすることもできる。

次の例では、y 軸ラベルの値を取り、その最後に % 記号を追加しています。

var options = {
   ...
    yAxis: {
        labels: {
            formatter: function() {
                return this.value + ' %';
            }
        },
    },
    ...

グリッド線(Grid lines)
グリッド線は、グラフの値を読みやすくするために水平線および垂直線を表示する。標準では無効になっている。有効にするには、 gridLineWidth を設定する。

xAxis: {
    gridLineWidth: 1
},
yAxis: {
    gridLineWidth: 1
}

複数の軸(Multiple axes)
複数の軸を持つには、以下のように複数の軸を作成する必要がある。

最初のyAxisはインデックス0から始まることに注意。グラフの右側に置く軸には、opposite: true オプションを指定する。

yAxis: [{ //--- Primary yAxis
    title: {
        text: 'Temperature'
    }
}, { //--- Secondary yAxis
    title: {
        text: 'Rainfall'
    },
    opposite: true
}],
series: [{
    yAxis: 0,
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
},{
    yAxis: 1,
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]

軸のタイトル(Axis title)
軸のタイトル。標準ではY軸は表示、X軸は非表示となる。

軸のタイプ(Axis types)
軸は、直線、対数(log)、日付、カテゴリのいずれかになる。軸のタイプは次のように設定する。

// The types are 'linear', 'logarithmic' and 'datetime'
yAxis: {
    type: 'linear',
}
// Categories are set by using an array
xAxis: {
    categories: ['Apples', 'Bananas', 'Oranges']
}

日時(Datetime)
タイプが日時の軸は、適切な間隔で丸めた日にちが使われる。

便利な関数をいくつか紹介。

// Get time in millis for UTC
Date.UTC(year,month,day,hours,minutes,seconds,millisec)
// Get time in millis for your local time
Date.parse("Month day, year");
// Built in Highcharts date formatter based on the [PHP strftime](https://php.net/manual/en/function.strftime.php) (see [API reference](https://api.highcharts.com/class-reference/Highcharts#.dateFormat) for usage)
Highcharts.dateFormat("Month: %m Day: %d Year: %Y", 20, false);
ドリルダウン(Drill down)

参考:Drill down / Drill down Demo

Highcharts にはドリルダウン機能が組み込まれている。グラフをクリックするとグラフが詳細な内容に置き換えられることを示すアニメーションが動作する。Drill down Demo で動作を確認するとわかりやすい。シリーズを連結することで、複数レベルのドリルダウンを適用することもできる。

親となるシリーズはdrilldownオプションを指定することで drilldown.series とリンクさせる。子供となる drilldown.series ではidオプションで親を指定する。

series: [{
    name: 'Things',
    colorByPoint: true,
    data: [{
        name: 'Animals',
        y: 5,
        drilldown: 'animals'
    }, {
        name: 'Fruits',
        y: 2,
        drilldown: 'fruits'
    }, {
        name: 'Cars',
        y: 4,
        drilldown: 'cars'
    }]
}],
drilldown: {
    series: [{
        id: 'animals',
        data: [
            ['Cats', 4],
            ['Dogs', 2],
            ['Cows', 1],
            ['Sheep', 2],
            ['Pigs', 1]
        ]
    }, {
        id: 'fruits',
        data: [
            ['Apples', 4],
            ['Oranges', 2]
        ]
    }, {
        id: 'cars',
        data: [
            ['Toyota', 4],
            ['Opel', 2],
            ['Volkswagen', 2]
        ]
    }]
}

非同期
多くの場合、ドリルダウンのデータを動的にロードしたいだろう。それには、drilldown オプションを true に設定し、chartのドリルダウン・イベントを使用してクリックされたらシリーズを読み込む。シリーズが読み込まれたら、Chart.addSeriesAsDrilldown メソッドを呼び出してデータを追加する。

// Create the chart
Highcharts.chart('container', {
    chart: {
        type: 'column',
        events: {
            drilldown: function (e) {
                if (!e.seriesOptions) {

                    var chart = this,
                        drilldowns = {
                            Animals: {
                                name: 'Animals',
                                data: [
                                    ['Cows', 2],
                                    ['Sheep', 3]
                                ]
                            },
                            Fruits: {
                                name: 'Fruits',
                                data: [
                                    ['Apples', 5],
                                    ['Oranges', 7],
                                    ['Bananas', 2]
                                ]
                            },
                            Cars: {
                                name: 'Cars',
                                data: [
                                    ['Toyota', 1],
                                    ['Volkswagen', 2],
                                    ['Opel', 5]
                                ]
                            }
                        },
                        series = drilldowns[e.point.name];

                    // Show the loading label
                    chart.showLoading('Simulating Ajax ...');

                    setTimeout(function () {
                        chart.hideLoading();
                        chart.addSeriesAsDrilldown(e.point, series);
                    }, 1000);
                }

            }
        }
    },
    title: {
        text: 'Async drilldown'
    },
    xAxis: {
        type: 'category'
    },

    legend: {
        enabled: false
    },

    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true
            }
        }
    },

    series: [{
        name: 'Things',
        colorByPoint: true,
        data: [{
            name: 'Animals',
            y: 5,
            drilldown: true
        }, {
            name: 'Fruits',
            y: 2,
            drilldown: true
        }, {
            name: 'Cars',
            y: 4,
            drilldown: true
        }]
    }],

    drilldown: {
        series: []
    }
});


参照

qiita.com

以上


--広告--

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

  • 作者:Ethan Brown
  • 発売日: 2017/01/20
  • メディア: 単行本(ソフトカバー)