Преобразование компонента Vue в компонент Vuetify - PullRequest
Новая
       14

Преобразование компонента Vue в компонент Vuetify

0 голосов
/ 25 апреля 2020

Я использую Vue + Vuetify. Никогда не изучал Vue standlone пошел прямо в дуэт

Я пытаюсь воссоздать спарклайн metri c - можно увидеть в этом codepen"PageViews" (Источник начинается с строка 30 в JS)

Проблема: Vue Автономный имеет другой метод регистрации компонентов. Я попытался перенастроить код и зарегистрировать компонент в соответствии с правилами Vuetify. Обычно спарклайн в Vuetify просто вызывается с <v-sparkline/>.

Несмотря на мои усилия, я застреваю с ошибкой: TypeError: «this.Chart не является функцией».

Что я делаете неправильно?

Моя попытка: metri c. 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>

1 Ответ

0 голосов
/ 25 апреля 2020

Вы не импортировали Диаграмму с диаграммы. js

 <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>
...