コピペでできるVuejs × TypeScriptな環境でchartjsでのグラフ描画

Vuejs × TypeScriptな環境でchartjsを使ってグラフを描画してみます。

コピペで実際にグラフ描画まで行けます。

インストールからプログラムの書き方まで記載しています。

完成イメージは以下となります。

棒と折れ線の複合グラフを描画していきます。

vueプロジェクトの作成

Vueのインストールとプロジェクトの作成をして、Vueの表示確認まで行います。

vueインストール

まずはvueをインストールします。

npm install -g @vue/cli

vueプロジェクトの作成

次にプロジェクトの作成をします。

vue create chart

「chart」の部分がプロジェクト名です。

上記のように表示されます。TypeScript を利用するために 「Manually select features」 を選択します。

TypeScriptを選択(上下キーでカーソル移動してスペースで選択)します。

あとはお好みで選択してプロジェクトを作成する

vueプロジェクトの起動

cd <プロジェクト名>
npm run serve

上記コマンド実行後、「http://localhost:8080/」でアクセスできます。

アクセス時すると、以下のような画面が表示されます。

次はchartjsのインストールをします。

vue-chartjsのインストール

次に以下コマンドでchartjsをインストールする

npm install vue-chartjs chart.js
npm install @types/chart.js -D

vueファイルの作成

環境は整ったのでvueファイルを修正・作成していきます！

まずsrcフォルダ内の「App.vue」の修正。「src/App.vue」の記述を全て削除し、以下の通り記載します。

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

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

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

次に「App.vue」から呼ばれる「src/components/HelloWorld.vue」ファイルを修正します。

「src/components/HelloWorld.vue」の記述を全て削除し、以下の通り記載します。

<template>
  <div class="chart-container">
    <Chart :chartData="chartData" :chartOptions="chartOptions" :chartStyles="chartStyles" />
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

import { ChartData, ChartOptions } from "chart.js";
import Chart from "./Chart.vue";

@Component({ components: { Chart } })
export default class HelloWorld extends Vue {

  // チャートのオプション
   chartOptions: ChartOptions = {
    maintainAspectRatio: false,
    tooltips: {
      mode: 'index'
    },
    scales: {
      yAxes: [
        {
          id: "1",
          position: "left",
        },
        {
          id: "2",
          position: "right"
          
        }
      ]
    }
  };
  // チャートのスタイル: <canvas>のstyle属性として設定
   chartStyles = {
    height: "100%",
    width: "100%"
  };
  // チャートのデータ
   chartData: ChartData = {
    labels: ['ラベル1','ラベル2','ラベル3','ラベル4'],
    datasets: [
      {
        type: "bar",
        label: "説明１",
        data: [1000,2000,1500,1750],
        fill: false,
        lineTension: 0,
        borderColor: "#00008b",
        yAxisID:"1" // Y軸のIDを指定 
      },
      {
        type: "line",
        label: "説明２",
        data: [1,2,5,2],
        fill: false,
        lineTension: 0,
        borderColor: "#ff0000", 
        yAxisID:"2" // Y軸のIDを指定 
      }
    ]
  };

}
</script>

最後に「src/components/HelloWorld.vue」から呼ばれる「src/components/Chart.vue」ファイルを作成します。

このファイルはchartjs描画用コンポーネントで、他のvueからでも、必要な値「chartOptions」「chartStyles」「chartData」を渡してあげればグラフの描画が可能となります。

<script lang="ts">
import { Component, Mixins, Prop, Watch } from "vue-property-decorator";
import Chart from "chart.js";
import { Line, Bar,mixins } from "vue-chartjs";

@Component({})
export default class LineChartComponent extends Mixins(Line, Bar, mixins.reactiveProp) {
  @Prop()  chartData!: Chart.ChartData;
  @Prop()  chartOptions!: Chart.ChartOptions;

  @Watch('chartData')
  onChartDataChanged() {
    this.load();
  }
  mounted() {
    this.renderChart(this.chartData, this.chartOptions);
  }
  load() {
    this.renderChart(this.chartData, this.chartOptions);
  }
}
</script>

完成! Vue・TypeScript・chartjsを使用したグラフ

まとめ

Vuejs × TypeScriptの環境でchartjsでグラフ描画ができました！