サンプルとかあまり見つけられず、苦労したので備忘録としてメモしておこうと思います。
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やらを使うので、どっちが分かりやすいかというと人それぞれかなぁ。
