Question

我正在使用ApexChart-Vue，并且我的图形有两个系列，一个条和一个线。该行是该特定日期的目标，而横线是该日期的值。我正在尝试将栏的颜色设置为红色（如果该值小于目标），则设置为绿色（如果该值等于或大于目标）。

我知道a可以向colors数组添加一个函数，但是每个系列只能添加一个函数。

基本上，我想按照文档在此处所说的方式进行操作：https://apexcharts.com/docs/options/colors/

colors: [function({ value, seriesIndex, w }) {
  if (value < 55) {
      return '#7E36AF'
  } else {
      return '#D9534F'
  }
}, function({ value, seriesIndex, w }) {
  if (value < 111) {
      return '#7E36AF'
  } else {
      return '#D9534F'
  }
}]

但是我需要以某种方式将当前日期的目标传递给函数。

有什么想法吗？

Answer 1

据我了解，您希望能够基于一些变化的目标来自定义值55和111，例如，条1的目标是10，条2的目标是20。

根据源代码，颜色函数接收以下对象：

{
     seriesIndex: this.seriesIndex, // the data series being coloured
     dataPointIndex: opts.dataPointIndex, // the index for that bar
     value: opts.value, // the value for that bar
     w: w // ??
}

我的方法是将目标存储为数组，然后使用索引值访问每个日期的阈值

colors: [
   function ({ value, dataPointIndex }) {
     if (targets[dataPointIndex] > ) {
          return Colors.red
     } else {      
          return Colors.green
     }
}]

Vue-ApexChart根据另一个系列值在各个条形上设置颜色

1 个答案: