chartjs | さゆフィクション http://it.kensan.net/it aws wordpress などなどゆるーく書いてます Sat, 22 Apr 2023 01:26:52 +0000 ja hourly 1 https://wordpress.org/?v=6.5.2 https://it.kensan.net/wp-content/uploads/2023/03/cropped-icon-32x32.png chartjs | さゆフィクション http://it.kensan.net/it 32 32 コピペでできるVuejs × TypeScriptな環境でchartjsでのグラフ描画 https://it.kensan.net/vuejs-x-typescript%e3%81%aa%e7%92%b0%e5%a2%83%e3%81%a7chartjs%e3%82%92%e4%bd%bf%e3%81%86.html Fri, 17 Apr 2020 02:54:00 +0000 https://verdy-it.xyz/itblog/?p=139 Vuejs × TypeScriptな環境でchartjsを使ってグラフを描画してみます。

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

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

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

chartjs

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

本記事でやること
  • 棒と折れ線の複合グラフを描画
  • 使うもの
    • Vuejs
    • TypeScript
    • chartjs

 

vueプロジェクトの作成

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

やること

Vueのインストール
プロジェクトの作成
Vueの表示確認

vueインストール

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

npm install -g @vue/cli

vueプロジェクトの作成

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

vue create chart

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

vueプロジェクト作成

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

vueプロジェクト作成

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: "説明1",
        data: [1000,2000,1500,1750],
        fill: false,
        lineTension: 0,
        borderColor: "#00008b",
        yAxisID:"1" // Y軸のIDを指定 
      },
      {
        type: "line",
        label: "説明2",
        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を使用したグラフ

chartjs

まとめ

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

やったこと

環境構築:Vuejs × TypeScript
chartjsで棒と折れ線の複合グラフを描画

]]>
chartjsで「Object literal may only specify known properties, and ‘tension’ does not exist in type ‘ChartDataSets’.」がでる時の対処法 https://it.kensan.net/vuejs-x-typescript-x-chartjs%e3%81%a7%e3%80%8cobject-literal-may-only-specify-known-properties-and-tension-does-not-exist-in-type-chartdatasets-%e3%80%8d%e3%81%8c%e3%81%a7%e3%82%8b.html Thu, 16 Apr 2020 00:06:01 +0000 https://verdy-it.xyz/itblog/?p=137 chartjsを扱う際に「Object literal may only specify known properties, and ‘tension’ does not exist in type ‘ChartDataSets’.」というエラーが出た時の解決法を記載します。

エラー発生時のchartjsのバージョンは2系です。

エラーが発生する該当のソースコードは以下となります。

chartData = {
  labels: ['ラベル1','ラベル2','ラベル3'],
    datasets: [
      {
        type: "line",
        label: "ラベル名",
        data: [1,2,3],
        fill: false,
        tension: 0, // ここが誤り
        borderColor: "#00008b",
      }     
    ]
};

「tension」が誤りで以下のように「lineTension」とする必要があるようです。

chartData = {
  labels: ['ラベル1','ラベル2','ラベル3'],
    datasets: [
      {
        type: "line",
        label: "ラベル名",
        data: [1,2,3],
        fill: false,
        lineTension: 0, // ここを修正する
        borderColor: "#00008b",
      }     
    ]
};

以下公式ページを見ると以下のことがわかります。

公式ページからわかること

chartjsのバージョン2系:lineTensionというプロパティ名が正しい
chartjsのバージョン3系:tensionというプロパティ名が正しい
→2系では「lineTension」というプロパティがあったが、3系では無くなり、代わりに「tension」というプロパティが追加されたようです。
→2系では「lineTension」というプロパティを使う必要がある!

 

chartjs2系の公式ページ:

Line · GitBook

chartjs3系の公式ページ:

Line Chart | Chart.js
Open source HTML5 Charts for your website
]]>