(Vue, ChartJS) 하위 구성 요소 캔버스 컨텍스트에서 차트의 그라데이션 배경 생성

(Vue, ChartJS) 하위 구성 요소 캔버스 컨텍스트에서 차트의 그라데이션 배경 생성

차트에 그라데이션 배경색을 지정하려고 하는데 작성한 래퍼 구성 요소에 차트가 렌더링되어 캔버스 컨텍스트에 액세스할 수 없습니다.

달성하고 싶은 것:

실제 포장지는 다음과 같습니다.

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

다른 꺽은선형 차트에 래퍼를 사용하고 있으며, 부모로부터 관련 데이터를 전달받도록 하고 있습니다.때로는 페이지당 래퍼 컴포넌트를 여러 번 사용할 수 있습니다.

모든 구성(옵션, 라벨 등)은 래퍼를 사용하는 부모 컴포넌트에서 수행됩니다.

래퍼에서 래퍼를 사용하는 상위 컴포넌트로 캔버스 컨텍스트를 가져오는 방법이 있습니까?

그라데이션 작성에는 다음과 같은 것이 필요합니다.

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부모 컴포넌트에 정의되어 있지 않기 때문에 콘텍스트를 얻을 수 없기 때문에 그라데이션은 작성할 수 없습니다.

액세스 할 수 있습니다.this.$refs.canvas를 참조해 주세요.부모 컴포넌트에서 액세스 하는 경우는, 몇개의 방법이 있습니다.

이 불결한 방법은 이제 끝이다.$children https://vuejs.org/v2/api/ #vm-children

더 좋은 방법은 그라데이션 정보를 독자적인 방법으로 설정하고 모든 데이터를 차트 구성요소로 전달하는 것입니다.

언급URL : https://stackoverflow.com/questions/51022003/vue-chartjs-create-gradient-background-for-chart-from-child-component-canvas