Zenn
📈

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

2022/03/06に公開
Nuxt
#
highcharts
#
resas
tech

Highchartsとは

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

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

プラグインの種類

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

今回は、

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

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

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

highcharts-vueのインストール

インストール

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

yarn add highcharts
yarn add highcharts-vue

プラグインの作成

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

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でプラグインを有効化

 plugins: [
    {
      src: '@/plugins/highcharts-vue',
      mode: 'client',
    },
  ],

highcharts-vueの設定

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

基本設定

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

import Vue from 'vue'
import HighchartsVue from 'highcharts-vue'
import Highcharts from 'highcharts'

Vue.use(HighchartsVue)

exporting機能

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

import Highcharts from 'highcharts'
import exportingInit from 'highcharts/modules/exporting'
import exportingCSV from 'highcharts/modules/export-data'

exportingInit(Highcharts)
exportingCSV(Highcharts)

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

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

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

import Highcharts from 'highcharts'
import stockInit from 'highcharts/modules/stock'

stockInit(Highcharts)

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

import Highcharts from 'highcharts'
import stockInit from 'highcharts/modules/stock'

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

mapChart

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

import HighchartsMapModule from 'highcharts/modules/map'

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

数値表示

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

if (typeof Highcharts === 'object') {
  Highcharts.setOptions({
    lang: {
      decimalPoint: '.',
      thousandsSep: ',',
      numericSymbols: null,
    },
  })
}

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

Highchartsのグラフを表示する

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

<template>
    <highcharts :options="chartOptions" />
</template>

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

Discussion