vue-chartjs：是否可以根据值动态更改颜色

Question

使用 vue-chartjs 可以改变条形的颜色吗？

这类似于基于chart.js的这个问题 chart.js bar chart color change based on value，答案中提供的 jsfiddle 正是我正在寻找的，除了在 vue-chartjs 中。

任何帮助表示赞赏

Answer 1

所以这应该是你的图表调用（在我的例子中，我将它命名为条形图）

<bar-chart
  :chart-data="barData"
  :options="barChartOptions">
</bar-chart>

:chart-data 和 :options 是我创建 bar 组件时定义的 2 个道具：

Vue.component('bar-chart', { 
 extends: VueChartJs.Bar,
 props: ['chartData', 'options'],

所以你的 barData，应该是这样的对象：

{datasets: [...], labels: [...]}

您的数据集是一个包含您要显示的图表的数组。因此，如果您只想显示 1 个数据，那么您的数组只有一个位置。所以让我们假设现在。我们将使用 dataset = dataset[0]

您的数据集接受一些属性，其中 2 个是必须的：

• 数据（包含您要显示的数据的数组）
• 标签（将鼠标悬停在条形数据上时的标签名称。它应该显示“标签：值”

它还接受一些其他属性，例如：

• 填写
• 悬停背景颜色
• 背景颜色
• 在这里查看更多信息：https://www.chartjs.org/docs/latest/charts/bar.html

所以现在，你的 backgroundColor 属性要么是一个颜色值（例如红色，#FF0000），要么是一个数组。

如果是数组，那么这应该是真的dataset.bgColors.length === dataset.data.length

并且每个 dataset.bgColors 数组位置是 dataset.data 数组中相应值的颜色。

dataset: {
 data: [1,2,-3,-4,2,1]
 backgroundColor: ['green', 'green', 'red', 'red', 'green', 'green']
 ...
}

所以现在，您可以根据您的数据构建一个具有所需颜色的 bgColors 数组。

------------- 更新数据 -----

致所有正在寻找一种方法在呈现图表数据后更新图表数据的人。这是一个不同的问题，但为了帮助社区：

当你设置你的图表组件时，你可以为chartData prop定义一个watch，这样当chartData改变时，该方法就会被调用并且你重新渲染图表：

Vue.component('bar-chart', {
  extends: VueChartJs.Bar,
  props: ['chartData', 'options'],
  methods: {
    renderLineChart () {
      this.renderChart(this.chartData, this.options)
    }
  },
  mounted () {
    this.renderLineChart()
  },
  watch: {
    chartData: function () {
      this.$data._chart.destroy()
      this.renderLineChart()
    }
  }
})

重要提示：确保制作新 chartData 对象信息的新副本，因为手表只会检查对象本身是否更改，而不检查其内部属性。

但是，如果您真的只想更改 dataset.data 或 dataset.backgroundColor 或其他任何内容，则观察者不会知道它已更改。您可以在观察者中使用属性 deep: true 来实现这一点，因为它会检查 chartData 对象内部的变化：

watch:
    chartData: {
      handler: function () {
        this.$data._chart.destroy()
        this.renderLineChart()
      },
      deep: true
    }
  }

我希望每个人都清楚答案。

最好的问候