(Vue,ChartJS)从子组件画布上下文为图表创建渐变背景

rwqw0loc  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(143)

我想为图表提供渐变背景色,但无法访问画布上下文,因为图表在我编写的 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在父组件中未定义,这使我无法获取上下文,所以我无法创建渐变。

fafcakar

fafcakar1#

您可以在图表组件中访问this.$refs.canvas。如果要从父组件访问它,有几种方法。
快速不洁的方式是结束这。$儿童https://v2.vuejs.org/v2/api/#vm-children
一个更好的方法是将渐变元素设置到自己的方法中,并将所有数据作为道具传递给图表组件。

相关问题