时间戳

首页 > 解决方案 > vue-chartjs：是否可以根据值动态更改颜色

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

问题描述

使用 vue-chartjs 是否可以更改条形的颜色？

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

任何帮助表示赞赏

标签： vue-chartjs

解决方案

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

<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 个是必须的：

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

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

所以现在，你的 backgroundColor 属性要么是一个颜色值（例如红色，#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
    }
  }

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

此致

推荐阅读