はじめに

2020年4月現在、Vue.js+TypeScript+Nuxt.js環境におけるhighcharts-vueの構築と活用関連のテキストが少なく、実装するのに少し苦労したのでtipsとしてまとめておくことにしました。

同じような環境で苦労されている方のお力になることができれば幸いです。

実装はできたもののベストプラクティスではないと思われるので、記事の内容について追加と修正を随時していきます。

highchartsを初めて使う方は、下記のリンクに基本が身につくようなサイトがまとまっているので、さらっと読んでおくとよいと思います。
https://qiita.com/ponsuke0531/items/3254dc0bad1655199827

構築

こちらのサイトをベースに構築していきました。
https://github.com/highcharts/highcharts-vue

highcharts-vueを使うための必要条件

下記がインストールされている必要があるようです。

Node.JS
NPM
Vue
Highcharts

Highchartsのライブラリをインストールしていない場合は、こちらのコマンドでインストールすることができます。
npm install --save highcharts

highcharts-vueのインストール

下記のコマンドでインストールすることができます。
npm install highcharts-vue

npmのエラーが発生する場合がありますので、エラーメッセージを見て対応しましょう。
私の場合は「gyp: No Xcode or CLT version detected!」というエラーが出たので、下記の記事を参考にして解消しました。
https://qiita.com/hppRC/items/a01e33a5c890f7b2c125

プラグインを使うためのファイルを作成する

インストールが完了したら、highcharts-vue.jsを下記のディレクトリに作成します。
website/plugins/highcharts-vue.js

ファイルの中身は以下のように記述します。

highcharts-vue.js

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

Vue.use(HighchartsVue)

また、今回はNuxt.jsを使用しているので、nuxt.config.jsに定義する必要があります。

nuxt.config.js


// 省略

plugins: [
    '~plugins/highcharts-vue'
],

// 省略

Vueファイルにインポートする

scriptタグ内に以下のように記述します。
そして、componentsセクション内に登録します。

hoge.vue


// 省略

<script lang="ts">
    import {Chart} from 'highcharts-vue'

// 省略

export default Vue.extend({
        components: {
            highcharts: Chart 
        },

// 省略

以上でhighcharts-vueを使う準備は終了です。

highcharts-vueでチャートを作る

型を定義する

以下のように記述します。

静的なデータの場合はreturn内でチャートを書くこともできますし、動的の場合はAPIのデータを受け取った後に書けたりします。

チャートの種類や書き方は下記サイトにサンプルがたくさんありますので重宝しています。
https://www.highcharts.com/demo

hoge.vue


// 省略
<script lang="ts">
import {Chart} from 'highcharts-vue'

export type DataType = {
       hogeChartOptions: object
    }

export default Vue.extend({
        components: {
            highcharts: Chart 
        },

// 省略

        data (): DataType {
            return {
               hogeChartOptions: {
                    title: {
                        text: '今週の学習時間'
                    },
                    xAxis: {
                        categories: ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'],
                        crosshair: true // マウスを当てると線が出て、数値が分かりやすくなる
                    },
                    yAxis: {
                        title: {
                            text: '時間',
                        },
                        labels: {
                        format: '{value}' // y軸の目盛り幅が値によって動的に変わる
                        },
                        opposite: true, // 右側のy軸とする
                    },
                    series: [{
                        name: '学習時間',
                        color: '#333333',
                        type: 'column',
                        data: [8, 6, 7, 8, 6, 7, 8],
                        marker: {
                            enabled: false // チャートのプロットをあらわす点を消すことができる
                        },
                    }],
                }


// 省略

responseのデータを使う場合

categoriesのような書き方をすれば動的なデータに対応することができます。

hoge.vue


<script lang="ts">

// 省略

  this.hogeChartOptions = {
       title: {
          text: 'hogehoge'
       },
       series: {
         // respnseのデータを入れることもできます
          data: response.data.hoge.hogehoge,
       },

// 省略

チャートを表示させる

highchartsタグ内のoptionsに、これまでの手順で作成したchartを指定してバインドさせるだけで表示されます。

hoge.vue


// 省略

　<highcharts :options="hogeChartOptions"></highcharts>

// 省略

今回作成した簡単なチャート

最後に

highcharts-vueは簡単にモダンなチャートを作成することができるので、さらに理解を深めて使いこなしていきたいですね。

繰り返しになりますが、以下のサイトにサンプルが大量にあるので、チャートの整形をする時はぜひご活用ください。
https://www.highcharts.com/demo