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