Vue.jsでHighchartを使う(しかもビルドシステムなしで）

サンプルとかあまり見つけられず、苦労したので備忘録としてメモしておこうと思います。

highchart vue.jsラッパーを入手

まず、Highchart公式GitHubリポジトリから、highcharts-vueを入手する。リポジトリ丸ごとダウンロードかcloneするが、使用するファイルは、 「highcharts-vue-master/dist/script-tag/highcharts-vue.min.js」だけです。 ※dist/module/配下にあるやつは、モジュールとしてロードする用です 　（普通はこっちを使うと思いますが、今回はタイトルにもあるとおり、ビルドシステムを使わず、htmlファイルからscriptタグで読み込むので。。。）

GitHub - highcharts/highcharts-vue

index.html（本体のHTML）

bodyタグの最後で、以下の順でスクリプト読み込み。

new Vue() する前に、Vue.useでプラグインを登録する。書き方に注意が必要です。

Vue.use(HighchartsVue.default);

※HTMLのscriptタグで読み込んでいるので、Vue.use(HighchartsVue)ではダメです

グラフ描画に関して。 Highchart公式には、さらっと1ページ書いてあるだけ（しか見つけられていない）。

Highcharts Vue Wrapper - Highcharts

こんな感じになるらしい

data() {  
  return {  
    title: '',  
    points: [10, 0, 8, 2, 6, 4, 5, 5],  
    chartType: 'Spline',
    seriesColor: '#6fcd98',
    colorInputIsSupported: null,
    chartOptions: {
      chart: {
        type: 'spline'
      },
      title: {
        text: 'Sin chart'
      },
      series: [{
        data: [10, 0, 8, 2, 6, 4, 5, 5],
        color: '#6fcd98'
      }]
    }
  }
},

ここで、chartOptionsが、チャート描画に使用するデータです。 ただし、vue.jsラッパーのポイントとして、pointsと、chartOptions.series[0].dataとに同じ値が入っている。 使い方としては、直接chartOptionsを触らずに、いったんpointsにグラフデータをセットする。pointsの変更をwatchして、変更後の値をseries.dataに代入することで、リアクティブにチャートが更新されます。。 この辺は、Chart.jsのVueラッパーであるvue-chart.jsとはアプローチが異なるので、最初は少し悩みました。 vue-chart.jsでは、mixinしたうえでreactivePropやらを使うので、どっちが分かりやすいかというと人それぞれかなぁ。