[VUE-CHARTJS] Не удается найти пример того, как использовать градиент при использовании mixin vuex и реактивныхProps (данные API)

Question

Проблема

Codepen: https://codesandbox.io/s/vyy0z2my33

1. Во-первых, вы можете отслеживать эту проблему на: https://github.com/apertureless/vue-chartjs/issues/473

2. ТакжеУ меня есть проект, использующий средство выбора даты, которое перерисовывает диаграмму на основе заданной даты, поэтому, если вы посмотрите на кодовую ручку, в BarChart.vue вы увидите, что я добавляю наблюдателя для перерисовки диаграммы

Но получилась ошибка, когда каждый раз, когда я выбираю дату

Фон

В двух словах, я не могу найти пример того, как поместить градиент на график.

Код

BarChart.vue

<script>
import { Bar, mixins } from "vue-chartjs";
import { mapGetters } from "vuex";

export default {
  extends: Bar,
  mixins: [mixins.reactiveProp],
  props: ["chartData", "chartLabels", "options"],

  mounted() {
    // chartData is created in the mixin
    // let gradientFill = this.$refs.canvas.getContext('2d').createLinearGradient(2000, 0, 0, 0);

    // gradientFill.addColorStop(0, "#18FFFF");
    // gradientFill.addColorStop(1, "#FF1744");
    this.renderChart(
      {
        labels: this.chartLabels,
        datasets: [
          {
            data: this.chartData,
            backgroundColor: "red",
            hoverBackgroundColor: "red"
          }
        ]
      },
      this.options
    );
  },
  computed: {
    ...mapGetters(["getBarHourTooltip"])
  },
  watch: {
    chartData() {
      this.$data._chart.update();
    },
    chartLabel() {
      this.$data._chart.update();
    }
  }
};
</script>

Фактический результат

1. Невозможно реализовать цвет градиента
2. Данныехорошо показано на начальном этапе, но получило ошибку при выборе даты (как показано на рисунке выше)

Answer 1

Если вы используете миксин, ваши данные диаграммы должны быть объектом данных Chart.js.С ярлыками, наборами данных и т. Д. В нем.Но тогда вы не сможете установить цвет градиента.

Но вы также можете просто передать свои метки и данные (если у вас есть только один набор данных), как вы это сделали прямо сейчас.

Добавить наблюдателя на обоих и затем вызвать this.$data._chart.update()

Но тогда вам нужно удалить реактивный миксин.

https://codesandbox.io/s/0yl728w0n

Answer 2

Я не смог воспроизвести с вашим кодом коды проекта коробки.Как вы меняете дату?

Сообщение об ошибке относится к методу map (), который используется в неопределенном массиве, предположительно происходящем из src / store / stores.js.Вы можете попытаться обернуть вызывающий вызов метод map () в оператор управления, например:

if (payloadInitAllChart.barDataHour) { // Example, could be other map() method
  payloadInitAllChart.barDataHour.map(response =>
   state.barChartPerHour.datasetBarHour.push(response)
  );
}