はじめに
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
ファイルの中身は以下のように記述します。
import Vue from 'vue'
import HighchartsVue from 'highcharts-vue'
Vue.use(HighchartsVue)
また、今回はNuxt.jsを使用しているので、nuxt.config.jsに定義する必要があります。
// 省略
plugins: [
'~plugins/highcharts-vue'
],
// 省略
Vueファイルにインポートする
scriptタグ内に以下のように記述します。
そして、componentsセクション内に登録します。
// 省略
<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
// 省略
<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のような書き方をすれば動的なデータに対応することができます。
<script lang="ts">
// 省略
this.hogeChartOptions = {
title: {
text: 'hogehoge'
},
series: {
// respnseのデータを入れることもできます
data: response.data.hoge.hogehoge,
},
// 省略
チャートを表示させる
highchartsタグ内のoptionsに、これまでの手順で作成したchartを指定してバインドさせるだけで表示されます。
// 省略
<highcharts :options="hogeChartOptions"></highcharts>
// 省略
今回作成した簡単なチャート
最後に
highcharts-vueは簡単にモダンなチャートを作成することができるので、さらに理解を深めて使いこなしていきたいですね。
繰り返しになりますが、以下のサイトにサンプルが大量にあるので、チャートの整形をする時はぜひご活用ください。
https://www.highcharts.com/demo