Closed7

[キャッチアップ] vue-chart-3

shingo.sasakishingo.sasaki

Chart.js 3 について

人気のあるグラフ描画ライブラリである Chart.js の最新バージョンで、2.x までと比べて以下のような改善が施されている

  • webworkers を用いた並列レンダリングなどによるパフォーマンスの劇的改善
  • CSSインジェクションが不要に
  • ツリーシェイキングが可能に
  • 大量のバグフィックス

ただし多くの破壊的変更も含まれているため、移行は慎重に行う必要がある

https://www.chartjs.org/docs/next/getting-started/v3-migration.html

shingo.sasakishingo.sasaki

Vue3 での使用

プロジェクト作成

Vite で Vue3 アプリの雛形を作る

$ yarn create vite
✔ Project name: … vue-3-chartjs-3
✔ Select a framework: › vue
✔ Select a variant: › vue-ts

$ cd vue-3-chartjs-3/
$ yarn install
$ yarn dev

char.js / vue-chart-3 をインストール

yarn add chart.js@^3.1.0 vue-chart-3

現状こんな感じ

package.json
{
  "name": "vue-3-chartjs-3",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "chart.js": "^3.1.0",
    "vue": "^3.2.6",
    "vue-chart-3": "^0.5.8"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.6.1",
    "@vue/compiler-sfc": "^3.2.6",
    "typescript": "^4.3.2",
    "vite": "^2.5.4",
    "vue-tsc": "^0.2.2"
  }
}
shingo.sasakishingo.sasaki

Chart の使用

<script lang="ts">
import { Chart, ChartData, registerables } from "chart.js";
import { defineComponent } from "vue";
import { PieChart, LineChart } from "vue-chart-3";
Chart.register(...registerables);

export default defineComponent({
  components: {
    PieChart,
    LineChart,
  },
  setup() {
    const pieData: ChartData<"pie"> = {
      labels: ["Red", "Blue", "Yellow"],
      datasets: [
        {
          label: "My First Dataset",
          data: [300, 50, 100],
          backgroundColor: [
            "rgb(255, 99, 132)",
            "rgb(54, 162, 235)",
            "rgb(255, 205, 86)",
          ],
          hoverOffset: 4,
        },
      ],
    };

    const lineData: ChartData<"line"> = {
      labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
      datasets: [
        {
          label: "My First Dataset",
          data: [65, 59, 80, 81, 56, 55, 40],
          fill: false,
          borderColor: "rgb(75, 192, 192)",
          tension: 0.1,
        },
      ],
    };

    return { pieData, lineData };
  },
});
</script>

<template>
  <div class="wrapper">
    <PieChart :chartData="pieData" />
    <LineChart :chartData="lineData" />
  </div>
</template>

<style scoped>
.wrapper {
  display: flex;
}
</style>

shingo.sasakishingo.sasaki

Vue2 で使ってみる

プロジェクト作成

vite だとデフォルトで vue3 を使わされるので、 vue-cli のデフォルト設定でプロジェクトを作る

$ npx vue create vue2-chartjs-3
$ cd vue-2-chartjs-3/

char.js / vue-chart-3 / compositionAPIプラグイン をインストール

yarn add chart.js@^3.1.0 vue-chart-3  @vue/composition-api

現状こんな感じ

package.json
{
  "name": "vue-2-chartjs-3",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@vue/composition-api": "^1.1.5",
    "chart.js": "^3.1.0",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-chart-3": "^0.5.8"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}
shingo.sasakishingo.sasaki

Chart の使用

<template>
  <div id="app">
    <PieChart :chartData="pieData" />
    <LineChart :chartData="lineData" />
  </div>
</template>

<script>
import { Chart, registerables } from "chart.js";
import { PieChart, LineChart } from "vue-chart-3";
Chart.register(...registerables);

export default {
  components: {
    PieChart,
    LineChart,
  },
  computed: {
    pieData() {
      return {
        labels: ["Red", "Blue", "Yellow"],
        datasets: [
          {
            label: "My First Dataset",
            data: [300, 50, 100],
            backgroundColor: [
              "rgb(255, 99, 132)",
              "rgb(54, 162, 235)",
              "rgb(255, 205, 86)",
            ],
            hoverOffset: 4,
          },
        ],
      };
    },
    lineData() {
      return {
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
        datasets: [
          {
            label: "My First Dataset",
            data: [65, 59, 80, 81, 56, 55, 40],
            fill: false,
            borderColor: "rgb(75, 192, 192)",
            tension: 0.1,
          },
        ],
      };
    },
  },
};
</script>

<style scoped>
#app {
  display: flex;
}
</style>

このスクラップは2021/09/19にクローズされました