0

问题

代码笔： https ://codesandbox.io/s/vyy0z2my33

  1. 首先，您可以在以下位置跟踪此问题：https ://github.com/apertureless/vue-chartjs/issues/473

  2. 我还有一个使用 datepicker 的项目，它根据给定的日期重新渲染图表，因此如果你查看 codepen，在 BarChart.vue，你可以看到我添加了观察者来重新渲染图表

我的项目

但是每次我选择日期时都会出错

控制台日志错误

背景

简而言之，我找不到如何将渐变放入图表的示例。

代码

条形图.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. 数据在初始时显示良好，但在选择日期时出现错误（如上图所示）
4

2 回答 2

1

我无法使用您的代码沙盒项目进行复制。你怎么改日期？

错误消息是指在未定义数组上使用的 map() 方法，可能源自 src/store/stores.js。您可以尝试将有问题的 map() 方法调用包装在控制语句中，如下所示：

if (payloadInitAllChart.barDataHour) { // Example, could be other map() method
  payloadInitAllChart.barDataHour.map(response =>
   state.barChartPerHour.datasetBarHour.push(response)
  );
}
于 2019-02-18T08:58:48.560 回答
0

如果您使用 mixin，您的图表数据必须是 Chart.js 数据对象。里面有标签、数据集等。但是您将无法设置渐变颜色。

但是您也可以像现在一样简单地传递您的标签和数据（如果您只有一个数据集）。

在两者上添加观察者，然后触发this.$data._chart.update()

但是你必须删除reactiveMixin。

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

于 2019-02-20T08:54:41.440 回答