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个数据，那么您的数组只能有一个位置。因此，现在假设。我们将使用数据集=数据集[0]

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

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

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

填充
hoverBackgroundColor
backgroundColor
在此处查看更多信息：https://www.chartjs.org/docs/latest/charts/bar.html

现在，您的backgroundColor属性可以是颜色值（例如red，＃FF0000）或数组。

如果它是一个数组，则应为true 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道具定义一个监视，因此，当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
    }
  }

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

最诚挚的问候

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

1 个答案: