highcharts-vueでexportingを有効にする方法

グラフライブラリHighchartsをvue.js(nuxt.js)で利用することができるプラグイン「highcharts-vue」でexport機能を有効にすることにちょっと詰まったのでメモ。

highcharts-vueのインストール

公式サイトにある通り、npmでインストールします。


npm install highcharts-vue

nuxt.config.jsでプラグインを有効化します。

plugins: [   
    {
      src: '@/plugins/highcharts-vue',
      ssr: true,
    },
],

exportモジュールを有効化

そのままではexport機能が利用できないので、モジュールを有効化していきます。公式サイトには次のように例文が記載されていました。デモはこちら

import Highcharts from 'highcharts'
import exportingInit from 'highcharts/modules/exporting'

exportingInit(Highcharts)

ただ、なぜか私の環境ではうまくいかなかったので、次の通り修正すると、うまく行きました。

import Highcharts from 'highcharts'
import exportingInit from 'highcharts/modules/exporting'

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

どうせならcsvやexcelでもexportしたいので、最終的には下記の形に。

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)
}

nuxt.jsで作成したサイト

筆者がnuxt.jsで作成したサイトです。よければご覧ください。

こちらもご覧ください

本ブログの管理人がNuxt.jsで開発したサイトです。

nuxt.js

Posted by user