Contents

1 Vuejs × TypeScriptな環境でchartjsを使う

Vuejs × TypeScriptな環境でchartjsを使う

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

完成イメージはこちら

chartjs

棒と折れ線の複合グラフを描画する。

プロジェクトの作成

インストール

まずはvueのインストールをする

npm install -g @vue/cli

1	npm install -g @vue/cli

プロジェクトの作成

次にプロジェクトの作成

vue create chart

1	vue create chart

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

vueプロジェクト作成

Typescript を利用するために Manually select features を選択

vueプロジェクト作成

Typeスクリプトを選択(上下キーでカーソル移動してスペースで選択)

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

プロジェクトの起動

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

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

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

アクセス時の画面は以下

プロジェクト起動

vue-chartjsのインストール

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

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

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

vueファイルの作成

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

まず「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>

</div>

</template>

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」から呼ばれる「components/HelloWorld.vue」ファイルの修正

不要な記述を削除し、グラフ描画に必要な値の設定を行い、次に作成する「components/Chart.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>

</div>

</template>

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>

最後に「components/HelloWorld.vue」から呼ばれる「components/Chart.vue」ファイルの作成。このファイルはchartjs描画用コンポーネントで、他のvue(例えばhoge.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>

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>

完成

chartjs