我想为图表提供渐变背景色,但无法访问画布上下文,因为图表在我编写的 Package 器组件中呈现。
我想实现的目标:
我的实际 Package 器看起来更像这样:
<script>
import { Line, mixins } from "vue-chartjs";
const { reactiveProp } = mixins;
export default {
extends: Line,
mixins: [reactiveProp],
props: ["options"],
components: {},
mounted() {
// this.chartData is created in the mixin
this.renderChart(this.chartData, this.options);
}
};
</script>
我将 Package 器用于不同的折线图,并让它的父级向下传递相关数据-有时在每页上使用 Package 器组件多次。
所有的配置(选项、标签等)都在父组件中完成,父组件使用 Package 器。
是否有一种方法可以将画布上下文从 Package 器获取到使用 Package 器的父组件?
要创建渐变,您需要如下所示:
this.gradient = this.$refs.canvas
.getContext("2d")
.createLinearGradient(0, 0, 0, 450);
this.gradient.addColorStop(0, "rgba(255, 0,0, 0.5)");
this.gradient.addColorStop(0.5, "rgba(255, 0, 0, 0.25)");
this.gradient.addColorStop(1, "rgba(255, 0, 0, 0)");
..但是this.$refs.canvas
在父组件中未定义,这使我无法获取上下文,所以我无法创建渐变。
1条答案
按热度按时间fafcakar1#
您可以在图表组件中访问
this.$refs.canvas
。如果要从父组件访问它,有几种方法。快速不洁的方式是结束这。$儿童https://v2.vuejs.org/v2/api/#vm-children
一个更好的方法是将渐变元素设置到自己的方法中,并将所有数据作为道具传递给图表组件。