(Vue, ChartJS) 从子组件 canvas context 为图表创建渐变背景

Question

我想为我的图表提供渐变背景颜色，但我无法访问 canvas 上下文，因为我的图表在我编写的包装器组件中呈现。

我想达到的目标：

我的实际包装器看起来像这样：

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

我将我的包装器用于不同的折线图，并让它的父级传递相关数据 - 有时每页多次使用包装器组件。

所有配置（选项、标签等）都在使用包装器的父组件中完成。

有没有办法从包装器获取 canvas 上下文到使用包装器的父组件？

要创建渐变，您需要这样的东西：

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 在父组件中未定义，这使我无法获取上下文，因此无法创建渐变。

Answer 1

您可以在图表组件中访问 this.$refs.canvas。如果你想从父组件访问它，有几种方法。

快速不干净的方法就是这个。$children https://vuejs.org/v2/api/#vm-children

更好的方法是将渐变设置到自己的方法中，并将所有数据作为道具传递给图表组件。

(Vue, ChartJS) 从子组件 canvas context 为图表创建渐变背景

(Vue, ChartJS) Create gradient background for chart from child component canvas context

javascript

vue.js

chart.js

vuejs2

vue-chartjs