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

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

# プロジェクトの作成
Vue CLI UIでプロジェクトを作成します。パッケージマネージャーとして**yarn**を選択しています。
![スクリーンショット (28).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/0db1afb6-e104-957e-21c4-4c44821b60c5.png)

手動を選択し、TypeScriptを有効化します。
![スクリーンショット (27).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/5cacb8b8-7819-c2f9-2adb-bc530dca29dd.png)

# 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年の平均気温を表示するグラフを作成します。

```vue:./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`に上記で作成したグラフを読み込ませます。

```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>
```

# グラフの表示
グラフが表示されます。
![スクリーンショット (30).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/dbf679ec-885b-95c4-9516-6aab3c97d9b2.png)

# 追記
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>
```

![SharedScreenshot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/c4ade700-5f7e-6a6c-bab8-986269fade45.jpeg)


# 参考
こちらの記事を参考にさせていただきました。
<a href="https://qiita.com/Tsutomu-Nagaoka/items/3f3603598b737e85c85a" target="_blank">Vue.js+TypeScript+Nuxt.js環境で、highcharts-vueを使うためのtips</a>