Contents
Vuejs × TypeScriptな環境でchartjsを使う
Vuejs × TypeScriptな環境でchartjsを使ってグラフを描画してみる。コピペで実際にグラフ描画まで行けます。使う技術はVuejs・TypeScript・chartjsです。インストールからプログラムの書き方まで記載しています。
完成イメージはこちら
棒と折れ線の複合グラフを描画する。
vueプロジェクトの作成
vueインストール
まずはvueのインストールをする
|
1 |
npm install -g @vue/cli |
vueプロジェクトの作成
次にプロジェクトの作成
|
1 |
vue create chart |
「chart」の部分がプロジェクト名
Typescript を利用するために Manually select features を選択
Typeスクリプトを選択(上下キーでカーソル移動してスペースで選択)
あとはお好みで選択してプロジェクトを作成する
vueプロジェクトの起動
|
1 2 |
cd <プロジェクト名> npm run serve |
上記コマンド実行後、「http://localhost:8080/」でアクセスできる。
アクセス時の画面は以下
vue-chartjsのインストール
次に以下コマンドでchartjsをインストールする
|
1 2 |
npm install vue-chartjs chart.js npm install @types/chart.js -D |
vueファイルの作成
環境は整ったのでvueファイルを修正・作成していく
まず「App.vue」の修正。不要な記述を削除し、以下のようにする
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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」から呼ばれる「components/HelloWorld.vue」ファイルの修正
不要な記述を削除し、グラフ描画に必要な値の設定を行い、次に作成する「components/Chart.vue」へ値を渡す。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<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> |
最後に「components/HelloWorld.vue」から呼ばれる「components/Chart.vue」ファイルの作成。このファイルはchartjs描画用コンポーネントで、他のvue(例えばhoge.vue)からでも必要な値「chartOptions」「chartStyles」「chartData」を渡してあげればグラフの描画が可能。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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を使用したグラフ
