Apexcharts-自定义棒颜色

Question

是否可以自定义柱形图中每个条形的颜色？

这是我使用 React 获得的数据类型：

const [data, setData] = useState([{
    data: [{
        x: 'Apple',
        y: 54,
        color: '#CCCCCC'
    }, {
        x: 'Orange',
        y: 66,
        color: '#FF0000'
    }]
}]);

但是这里的颜色没有应用于图表。

我也尝试过将“分布式”选项设置为 true 。

plotOptions: {
        bar: {
            distributed: true,
        },
    },

Answer 1

有两种方法可以实现这一目标，您非常接近他们。

1。将颜色传递给

您尝试过的数据非常相似，但是使用fillcolor作为密钥。

data: [{
        x: 'Apple',
        y: 54,
        fillColor: '#CCCCCC'
    }, {
        x: 'Orange',
        y: 66,
        fillColor: '#FF0000'
    }]

2。 分布式选项

要为此起作用，它需要嵌套在options对象中：

options: {
  plotOptions: {
    bar: {
      distributed: true
    }
  }
},

如果这不起作用，则值得确保那里' t任何无效的属性（例如color）可能引起问题。

我敢肯定，您已经发现了一些示例，这些示例在 apexcharts docs 。