我想从Chart对象访问getValue方法,但我得到函数undefined。
<template>
<div>
<canvas width="600" height="400" ref="canvas"></canvas>
</div>
</template>
<script>
import Vue from 'vue';
import Chart from 'chart.js';
import Axios from 'axios';
export default {
mixins: [DateRangeMixin],
props: {
// other props...
callback: false,
},
data() {
return {
chart: '',
};
},
mounted() {
// ...
},
methods: {
//other methods...,
getValue(data) {
if (data === 1) {
return 'Up'
} else if(data === 0) {
return 'Down';
}
},
render(data) {
this.chart = new Chart(this.$refs.canvas, {
type: 'line',
data: {
labels: Object.keys(data),
datasets: [{
// a lot of data ....
data: Object.values(data),
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback(label, index, labels) {
return this.getValue(label); // <-- Tried this and got: 'this.getValue is not a function'. I understand it bounces to new Chart object, but how to resolve this?
}
}
}]
}
}
});
},
},
};
</script>
我理解它是因为Chart是一个对象而this
指向它,但是如何解决这个问题并从回调中访问我的方法?
我想如果将export default
...设置为variable
,那么我可以通过variable.methods.getValue
访问我的方法,但在这种情况下我如何实现目标?
答案 0 :(得分:1)
在创建new Chart()
之前,将其分配给变量self:var self = this;
。
然后,您可以通过self
访问您的组件属性。