vuejs(ts)에서 그래프(chartjs)를 표시해 봅시다.
세상에는 데이터를 건네주면 그래프(차트)를 그려 주는 js라고 하는 편리한 것이 있어, chartjs, D3, google chart, TradingView등 여러가지 있습니다.
이번에는 손쉬운 chartjs 를 vue-chartjs 를 이용해 시험해 보았습니다.

h tps : // ゔ 에 쨩 rtjs. rg/

htps //w w. 찬 rtjs. rg/

적당하게 vue에 표본을 만듭니다.

이번에는 typescript를 사용하도록 create하고 있습니다.

~/tmp/chartjs/tekitou master
❯ node --version
v11.10.0


~/tmp/chartjs/tekitou master
❯ cat package.json
{
  "name": "tekitou",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.6.6",
    "vue-class-component": "^6.0.0",
    "vue-property-decorator": "^8.0.0",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-typescript": "^3.5.0",
    "@vue/cli-service": "^3.5.0",
    "typescript": "^3.2.1",
    "vue-template-compiler": "^2.5.21"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

vue-chartjs를 넣습니다.

chart.js도 넣어야 하므로 주의를.
특히 이유가 없으면 vue-chartjs를 이용해도 좋을까 생각합니다.

❯ npm install vue-chartjs chart.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ [email protected]
+ [email protected]
added 6 packages from 10 contributors and audited 21138 packages in 5.047s
found 0 vulnerabilities

죄송합니다. @types 도 필요하네요.

❯ npm install @types/chart.js -D
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ @types/[email protected]
added 1 package from 14 contributors and audited 21139 packages in 4.805s
found 0 vulnerabilities

차트의 구성 요소를 Home에 추가합니다.

Home.vue에 불필요한 일 없이 최소한에 추가해 보겠습니다.<TekitouChartComponent> 라는 것을 추가했습니다.
어려워 버리기 때문에 가로 폭을 style로 맞추어 버렸습니다.

@/views/Home.vue

<template>
  <div class="home">
ここいらにどうでもよいチャートを表示しましょう。
<TekitouChartComponent style="width:360px;"></TekitouChartComponent>
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import TekitouChartComponent from '@/components/TekitouChartComponent.vue';

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

TekitouChartComponent를 만듭니다.

상위 구성 요소에서 chartData 및 chartOptions로 데이터를 전달하고 this.renderChart에서 chartjs로 데이터를 전달하는 느낌이 듭니다.

@/components/TekitouChartComponent.vue

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

@Component({})
export default class LineChartComponent extends Mixins(Line, mixins.reactiveProp) {
  // グラフ用のデータ
  private chartData: Chart.ChartData = {
    labels: ["1月", "2月", "3月", "4月", "5月"],
    datasets: [
      {
        type: "line",
        label: "花粉だめーじ",
        data: [20, 10, 30, 40, 30, 20],
        fill: true,
        borderColor: "#AAFFAA"
      }
    ]
  };

  // 表示オプションなど(今回は空
  private chartOptions: Chart.ChartOptions;

  public mounted() {
    this.renderChart(this.chartData, this.chartOptions);
  }
}
</script>

이제 우선 그래프가 나옵니다.

하지만 이것이라고. . .

실제로 사용하면 서버라든지에서 데이터를 가져와 컴포넌트에 전달하는 것이 일반적이므로 Prop에서 전달하는 느낌입니다.
(dev console에서 warning의 폭풍입니다!)

HomeComponent에서 TekitouComponent를 호출합니다.

TekitouComponent에서 데이터 검색

ChartComponent에 Prop로 데이터를 건네줍니다.

라는 것이 정답입니다.

요약

extends Mixins(Line, mixins.reactiveProp) renderChart에 데이터와 옵션을 전달합니다.

chartData 에 정해진 형태로 값을 건네준다. 라벨 및 데이터 세트

datasets는 복수 넣을 수 있다.

그래프의 종류도 부족하다.

그렇게 해서, 그렇게 도움이 되지 않는 기사입니다만, chartjs를 시험해 보았습니다.
우선 그래프를 내고 싶다고 하는 요구에는 대답해 줄까. 반대로 3D로 빙빙 움직이고 싶다! 라고 하는 용도에는 맞지 않을까.
이번에는 Vue가 아니어도 좋았다.
Angular 때는 d3-sharp를 사용했구나. htps : // 기주 b. 이 m/d3/d3-샤페

보충

D3는 SVG, chartjs는 canvas를 사용하는 것 같습니다.

D3는 차트뿐만 아니라 더 이상 그림을 표시하는 라이브러리군요.

TradingView는 무역 전문이며 강한 것 같습니다. 촛불이라든가 그런 게 나온다.

h tps : // ゔ 에 쨩 rtjs. rg/

htps //w w. 찬 rtjs. rg/

htps // d3js. rg/

htps : // 기주 b. 이 m / t 등 ぢ g ゔ 아 w

htps : //에서 ゔぇぺぺrs. 오, ぇ. 코 m/짱rt/