Nuxt.jsでhighcharts-vueを利用してグラフを描画する

Highchartsとは

Highchartsは、Webでグラフを描写するためのJavaScriptライブラリ。
個人サイトや教育サイト、非営利組織は無料で利用可能。
ライセンスの詳細はこちら

NuxtでHighchartsを利用する場合の選択肢

プラグインの種類

Nuxt.jsのプロジェクトでHighchartsを利用する場合、プラグインがいくつか公開されている。

今回は、

  1. HighchartsMapsで独自のtopojsonを利用したい。
  2. HighchartsStockの機能である横スクロールを利用したい。

という2つの理由から、highcharts-vueを利用する。

他の2つでも同様の機能は実現できるかもしれない。
少なくとも私にとってはhighcharts-vueが一番使いやすかった。

highcharts-vueのインストール

インストール

highchartshighcharts-vueをインストール。公式ドキュメント参照。

1
2
yarn add highcharts
yarn add highcharts-vue

プラグインの作成

プロジェクトのplugins配下にhighcharts-vue.jsを作成。

highcharts-vue.jslink
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import Vue from 'vue'
import HighchartsVue from 'highcharts-vue'
import Highcharts from 'highcharts'
import stockInit from 'highcharts/modules/stock'
import exportingInit from 'highcharts/modules/exporting'
import exportingCSV from 'highcharts/modules/export-data'
import HighchartsMapModule from 'highcharts/modules/map'

Vue.use(HighchartsVue)

if (typeof Highcharts === 'object') {
stockInit(Highcharts)
exportingInit(Highcharts)
exportingCSV(Highcharts)
HighchartsMapModule(Highcharts)

Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ',',
numericSymbols: null,
},
})

}

nuxt.config.jsでプラグインを有効化

1
2
3
4
5
6
plugins: [
{
src: '@/plugins/highcharts-vue',
mode: 'client',
},
],

highcharts-vueの設定

プラグインの設定内容を順に説明する。

基本設定

highcharts-vueを使う場合は必須。公式ドキュメント参照。

1
2
3
4
5
import Vue from 'vue'
import HighchartsVue from 'highcharts-vue'
import Highcharts from 'highcharts'

Vue.use(HighchartsVue)

exporting機能

グラフをPNGやCSV等で出力できるexporting機能を有効化する。
公式ドキュメントには次のとおり紹介されているが、私の環境ではエラーになった。

1
2
3
4
5
6
import Highcharts from 'highcharts'
import exportingInit from 'highcharts/modules/exporting'
import exportingCSV from 'highcharts/modules/export-data'

exportingInit(Highcharts)
exportingCSV(Highcharts)

こちらを参考に、下記のとおり修正したら解決。

1
2
3
4
5
6
7
8
import Highcharts from 'highcharts'
import exportingInit from 'highcharts/modules/exporting'
import exportingCSV from 'highcharts/modules/export-data'

if (typeof Highcharts === 'object') {
exportingInit(Highcharts)
exportingCSV(Highcharts)
}

stock機能

グラフを横スクロールしたい場合、標準のhighchatsではなく、highcharts stockのが必要となる

https://www.highcharts.com/demo/stock

公式ドキュメントを参考に、プラグインに下記の通り追記。

1
2
3
4
import Highcharts from 'highcharts'
import stockInit from 'highcharts/modules/stock'

stockInit(Highcharts)

これもエラーが出たので、次の通り修正。

1
2
3
4
5
6
import Highcharts from 'highcharts'
import stockInit from 'highcharts/modules/stock'

if (typeof Highcharts === 'object') {
stockInit(Highcharts)
}

mapChart

Highcharts Mapsを利用したいので、公式ドキュメントを参考に次のとおり追記。

1
2
3
4
5
import HighchartsMapModule from 'highcharts/modules/map'

if (typeof Highcharts === 'object') {
HighchartsMapModule(Highcharts)
}

数値表示

桁区切りにカンマを利用したいのと、1000を1kと表現したくないので、下記を追記。

1
2
3
4
5
6
7
8
9
if (typeof Highcharts === 'object') {
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ',',
numericSymbols: null,
},
})
}

もし1000 -> 1千と表示したいなら、numericSymbols: ['千', '百万', '十億', '兆', '千兆', '百京']

Highchartsのグラフを表示する

グラフを表示したいコンポーネントに下記のとおり記述する。
chartOptionsについては、公式デモにたくさんのサンプルがあるので参照。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
<highcharts :options="chartOptions" />
</template>

<script>
export default {
data() {
return {}
},
computed: {
series() {
'ここでグラフデータを定義'
},
chartOptions() {
return {
chart: {},
title: {},
xAxis: {},
yAxis: {},
plotOptions: {},
series: this.series,
}
},
},
}
</script>