(Vue, ChartJS) Создание градиентного фона для диаграммы из контекста холста дочернего компонента - PullRequest
Новая
       26

(Vue, ChartJS) Создание градиентного фона для диаграммы из контекста холста дочернего компонента

0 голосов
/ 25 июня 2018

Я хочу дать моей диаграмме цвет градиента фона, но я не могу получить доступ к контексту холста, поскольку моя диаграмма отображается в компоненте оболочки, который я написал.

Чего я хочу достичь: gradient fill

Моя настоящая оболочка выглядит примерно так: 

<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 не определено в родительском компоненте, что не позволяет мне получить контекст, поэтому я не могу создать градиент.

1 Ответ

0 голосов
/ 26 июня 2018

Вы можете получить доступ к this.$refs.canvas в своем компоненте диаграммы. Если вы хотите получить к нему доступ из родительского компонента, есть несколько способов.

Это быстрый нечистый путь. $ Children https://vuejs.org/v2/api/#vm-children

Лучшим способом было бы настроить материал градиента в собственный метод и передать все данные в качестве реквизитов для компонента диаграммы.

...