Vue(Vue-CLI)とTypeScriptでhighchartsのグラフ表示

Vue(Vue-CLI)とTypeScriptでhighchartsのグラフを表示させます。

プロジェクトの作成

Vue CLI UIでプロジェクトを作成します。パッケージマネージャーとしてyarnを選択しています。

手動を選択し、TypeScriptを有効化します。

package.jsonにhighchartsの追加

package.jsonのdependenciesにhighchartsとhighcharts-vueを追加します。

package.json

  "dependencies": {
    "core-js": "^3.6.4",
    "highcharts": "^8.1.0",
    "highcharts-vue": "^1.3.5",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.1",
    "vue-router": "^3.1.6"
  }

追加後、yarnコマンドを実行し、追加します。

yarn

グラフの作成

2019年の平均気温を表示するグラフを作成します。

./src/components/Graph.vue

<template>
    <div>
        <highcharts :options="graph"></highcharts>
    </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import { Chart } from 'highcharts-vue';

    export type DataType = {
        graph: any;
    }

    @Component ({
        components: {
            highcharts: Chart 
        },
    })
    export default class Graph extends Vue {
        data (): DataType {
            return {
                graph: {
                    title: {
                        text: '2019年の平均気温'
                    },
                    subtitle: {
                        text: '引用：<a href="http://www.data.jma.go.jp/obd/stats/etrn/view/monthly_s1.php?prec_no=44&block_no=47662&year=2019&month=&day=&view=">気象庁</a>'
                    },
                    xAxis: {
                        categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        crosshair: true
                    },
                    yAxis: {
                        title: false,
                        labels: {
                            format: '{value} ℃'
                        },
                        opposite: false,
                    },
                    credits: {
                        enabled: false
                    },
                    tooltip: {
                        pointFormat: '{series.name}：{point.y:.1f} ℃'
                    },
                    series: [{
                        name: '平均気温',
                        type: 'column',
                        data: [5.6, 7.2, 10.6, 13.6, 20.0, 21.8, 24.1, 28.4, 25.1, 19.4, 13.1, 8.5],
                        marker: {
                            enabled: true
                        },
                    }],
                }
            }
        }
    }
</script>

グラフの読み込み

App.vueに上記で作成したグラフを読み込ませます。

./src/App.vue

<template>
    <div id="app">
        <Graph></Graph>
    </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import Graph from '@/components/Graph.vue';

    @Component ({
        components: {
            Graph,
        },
    })
    export default class App extends Vue {
    }
</script>

<style>
</style>

グラフの表示

グラフが表示されます。

追記

APIなどから、値を取得してグラフ表示する場合は、下記のようにします。
下記の例では、配列に乱数をセットし、乱数をhighchartsで描写します。

Graph.vue

<template>
  <div class="graph">
    <div class="buttons">
      <p>
        <b-button variant="outline-secondary" @click="viewGraph('line')">線グラフ</b-button>
      </p>
    </div>
    <div id="graph">表示したいグラフを選択してください。</div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import * as Highcharts from "highcharts";
import Datas from "@/store/index";

@Component
export default class Graph extends Vue {
  /** 乱数を入れる配列 */
  private array: number[] = [];
  /** 表示するグラフタイプ */
  private graphType: any = "";

  private categories: string[] = ["A", "B", "C", "D"];

  viewGraph(graphType: string) {
    this.graphType = graphType;
    // 配列の初期化
    this.array = [];
    for (let i = 0; i < 4; i++) {
      this.array.push(Math.round(Math.random() * 100));
    }
    this.graph();
  }

  graph() {
    Highcharts.chart({
      chart: {
        renderTo: "graph"
      },
      title: false as Highcharts.TitleOptions,
      xAxis: {
        categories: this.categories,
        crosshair: true
      } as Highcharts.XAxisOptions,
      yAxis: {
        title: false,
        labels: {
          format: "{value}"
        },
        opposite: false
      } as Highcharts.YAxisOptions,
      series: [
        {
          name: "折れ線グラフ",
          type: this.graphType,
          data: this.array,
          marker: {
            enabled: true
          }
        }
      ]
    });
  }
}
</script>

参考

こちらの記事を参考にさせていただきました。
Vue.js+TypeScript+Nuxt.js環境で、highcharts-vueを使うためのtips