Chartjsを使わないで線グラフを作ってみる

いや、Chartjs使いたいんだけども。
いろんなエラーが出て、Stackoverflowとかに投げても誰も回答してくれなかったので、いっそ1から自分で作っちゃおうと。
とても効率の悪い決断に辿り着きました。

CSSの勉強にもなるし。やってみよう！！

2023/01/04 10:34

CSSの使い方を何も知らないのでかなりカッコ悪い実装になりそう（調べろ）

遭遇したエラー

Property or method "chartData" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

解決法：単なるスペルミス修正
export default {
name: 'LineChart',
data() {　//→ datas() { になってた

.chart_back:nth-child {
適応されない？position:absoluteになってる？？

解決法：時間ないので全部. chart_back * { で済ませた。

14:44

全く汎用性のないグラフができた。
90度から-90度の揺れを表示するグラフ。

<template>
    <div :chartData="chartData">
      <div class="unit_text">({{ chartData.unit }})</div>
      <div style="position: relative;">
        <div class="chart_back">
          <div>90</div>
          <div>45</div>
          <div>0</div>
          <div>45</div>
          <div style="margin-bottom: 0px">-90</div>
        </div>
        <div class="chart">
          <canvas width="500" height="400" :id=chartData.id></canvas>
        </div>
      </div>
      <br>
    </div>
</template>

<script>

export default {
    name: 'LineChart',
    props: {
      chartData: {},
      chartName: ""
    },
    mounted: async function() {
      this.drawimage()
    },
    updated() {
      this.drawimage()
    },
    methods: {
      drawimage() {
        console.log('drawimage',this.chartData.datas)
        if (this.chartData.datas == undefined) {
          return
        }
        var canvasElem = document.getElementById(this.chartData.id)
        
        var displayWidth = 2400;
        var displayHeight = 800;
        canvasElem.style.width = '70vw';
        canvasElem.style.height = '24vw';
        canvasElem.width = displayWidth;
        canvasElem.height = displayHeight;
        console.log('canvasElem',
        canvasElem.width,canvasElem.height)
        
        var yPos = displayHeight/200
        var centerY = displayHeight/2
        var ctx = canvasElem.getContext('2d')
        ctx.strokeStyle = 'rgb(73, 174, 224)';
        ctx.lineWidth = 6;
        var x = displayWidth/24
        ctx.moveTo(x, centerY)
        var gridW = (canvasElem.width-x*2)/this.chartData.datas.length
        console.log("gridW",gridW)
        for (var idx in this.chartData.datas) {
          var y = (this.chartData.datas[idx]*yPos+centerY)
          console.log('gridWgridW',this.chartData.datas[idx],y)
          ctx.lineTo(x, y);
          ctx.stroke();
          x += gridW
        }
      }
    },
  }
</script>

<style>
.chart {
  margin: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  font-weight: 800;
  border: none;
}
.chart_back {
  margin-left: 5%;
  width: 70vw;
  height: 24vw;
  background-color: rgba(255, 255, 255, 0.245);
}
.chart_back * {
  margin-bottom: calc(6vw - 1px);
  width: 100%;
  height: 1px;
  background-color: rgb(220, 226, 230);
  text-align: left;
  font-size: 12px;
}
.unit_text {
  margin-left: 4vw;
  margin-bottom: 1vw;
  font-weight: 600;
  font-size: 11px;
  width: fit-content;
  color: gray;
}
</style>

次はこれを応用して利用できるようにしたい。

実装中に遭遇したエラー

vue.runtime.esm.js?2b0e:4605 [Vue warn]: Invalid prop type: "[object Object]" is not a constructor

解決法：
props: {
 chartData: {}, // chartData: { type: {} } とか、typeに変なこと書いてると怒る