将Vue组件转换为Vuetify组件

Question

我正在使用Vue+Vuetify。从未学过Vue standlone直接进入二人组

我正在尝试重新创建一个sparkline度量-可以在这个代码笔"PageViews"中看到(源代码从JS中的第30行开始(

问题是：Vue单机版有一种不同的注册组件的方法。我已经尝试根据Vuetify的规则重新编写代码并注册组件。通常，Vuetify中的sparkline只使用<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>