Question

我正在使用Vue + Vuetify。从未得知Vue Standlone会直接进入二人组

我正在尝试重新创建迷你图指标-可以在此codepen“ PageViews”中看到（源代码从JS中的第30行开始）

问题：Vue独立版具有不同的组件注册方法。我试图根据Vuetify的规则重新添加代码并注册组件。通常，在Vuetify中的迷你图仅用<v-sparkline/>来调用。

尽管付出了很大的努力，但我仍然遇到以下错误：TypeError：“ this.Chart不是函数”。

我在做什么错了？

我的尝试：metric.vue

<template>
<div class="br2">
      <div class="pa3 flex-auto bb b--white-10">
        <h3 class="mt0 mb1 f6 ttu white o-70">{{ title }}</h3>
        <h2 class="mv0 f2 fw5 white">{{ value }}</h2>
      </div>
      <div class="pt2">
        <canvas></canvas>
      </div>
    </div>
</template>


<script>

  export default {

        props: ["title", "value"],


        data () {
            return {
                ctx: null,

            }
            },

   mounted () {

    this.ctx = this.$el.querySelector("canvas").getContext("2d");
    let sparklineGradient = this.ctx.createLinearGradient(0, 0, 0, 135);
    sparklineGradient.addColorStop(0, "rgba(255,255,255,0.35)");
    sparklineGradient.addColorStop(1, "rgba(255,255,255,0)");

    let data = {
      labels: ["A", "B", "C", "D", "E", "F"],
      datasets: [{
        backgroundColor: sparklineGradient,
        borderColor: "#FFFFFF",
        data: [2, 4, 6, 4, 8, 10]
      }]
    };

     this.Chart(this.ctx, {
      data: data,
      options: {
        elements: {
          point: {
            radius: 0
          }
        },
        scales: {
          xAxes: [{
            display: false
          }],
          yAxes: [{
            display: false
          }]
        }
      }
    });
  }
}
</script>

Answer 1

您没有从chart.js导入Chart

 <template>
      <div id="app">
        <div class="br2">
          <div class="pt2">
            <canvas></canvas>
          </div>
        </div>
      </div>
    </template>

    <script>
    import Chart from 'chart.js'
    export default {
      name: "App",
      data(){
        return{
          ctx: null
        }
      },
      created: function() {
        Chart.defaults.global.legend.display = false;
      },
      mounted: function() {
        this.ctx = this.$el.querySelector("canvas").getContext("2d");
        let sparklineGradient = this.ctx.createLinearGradient(0, 0, 0, 135);
        sparklineGradient.addColorStop(0, "rgba(255,255,255,0.35)");
        sparklineGradient.addColorStop(1, "rgba(255,255,255,0)");

        let data = {
          labels: ["A", "B", "C", "D", "E", "F"],
          datasets: [{
            backgroundColor: 'red',
            borderColor: "#FFFFFF",
            data: [2, 4, 6, 4, 8, 10]
          }]
        };

        Chart.Line(this.ctx, {
          data: data,
          options: {
            elements: {
              point: {
                radius: 0
              }
            },
            scales: {
              xAxes: [{
                display: false
              }],
              yAxes: [{
                display: false
              }]
            }
          }
        });
      }
    };
    </script>

    <style>
    #app {
      font-family: "Avenir", Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

将Vue组件转换为Vuetify组件

1 个答案: