Vue.jsでHighchartsを実装する「vue-highcharts」

vue-highchartsとは

vue-highchartsは、SVGベースのチャートが実装できるコンポーネントライブラリです。
データはJSONやCSVなどを使用することが可能です。
ライブで読み込まれたデータを反映させることも可能です。

多様な種類のチャートを扱うことができます。

【動画サイズ：119KB】

環境

この記事は、以下の管理人の検証環境をもとにして記事にしています。

ライブラリの取得

ライブラリを取得するには、npm, CDNのどれか一つを使用します。

npm install vue2-highcharts --save

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-highcharts.min.js"></script>

gitリポジトリは以下から取得できます。

導入手順

管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。
このサンプルでは、SVGベースの折れ線グラフを実装します。

step
1ライブラリの呼び出し

まずライブラリを呼び出す為に、以下の２通りのケースで呼び出します。

ES6等で実装する場合

import VueHighcharts from 'vue2-highcharts'

UMDで実装する場合

const VueHighcharts = window['VueHighcharts'].default;  

step
2メソッドを設定

components プロパティに上記で取得した VueHighcharts を設定します。

本来はajaxなどでライブ取得をするイメージなのですが、今回は予め変数でデータを取得します。

const asyncData = {
  name: 'Tokyo',
  marker: {
    symbol: 'square'
  },
  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
    y: 26.5,
    marker: {
      symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
    }
  }, 23.3, 18.3, 13.9, 9.6]
}
new Vue({
  el: '#app',
  components: {
        'vue-highcharts':VueHighcharts
    },
    data: function(){
      return{
        options: {
          chart: {
            type: 'spline'
          },
          title: {
            text: 'Monthly Average Temperature'
          },
          subtitle: {
            text: 'Source: WorldClimate.com'
          },
          xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
              'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
          },
          yAxis: {
            title: {
              text: 'Temperature'
            },
            labels: {
              formatter: function () {
                return this.value + '°';
              }
            }
          },
          tooltip: {
            crosshairs: true,
            shared: true
          },
          credits: {
            enabled: false
          },
          plotOptions: {
            spline: {
              marker: {
                radius: 4,
                lineColor: '#666666',
                lineWidth: 1
              }
            }
          },
          series: []
        }
      }
    },
    methods: {
      load: function(){
          let lineCharts = this.$refs.lineCharts;
          lineCharts.delegateMethod('showLoading', 'Loading...');
          setTimeout(() => {
              lineCharts.addSeries(asyncData);
              lineCharts.hideLoading();
          }, 2000)
      }
    }
});

step
3テンプレートを準備

<vue-highcharts> コンポーネントを設置します。
optionsに上記で設定した options を設定します。
buttonを押させた時に、データを設定します。

サンプルはケバブケースで記載しています。

<div id="app">
  <vue-highcharts :options="options" ref="lineCharts"></vue-highcharts>
  <button @click="load">load</button>
</div>

サンプル

今回のソースを実際に触って確認できるようにデモを用意しました。

See the Pen Vue.jsでHighchartsを実装する「vue-highcharts」 by カバの樹 (@kabanoki) on CodePen.dark

さいごに

SVGベースのチャートが実装できるコンポーネントライブラリでした

今日はこの辺でー