更改 ApexCharts 中范围柱形图的颜色

2023-12-05

我正在尝试使用 ApexCharts 为我的一个项目实现瀑布图。 ApexCharts 不提供开箱即用的此图表。因此,我正在尝试将范围柱形图修改为瀑布图。 这几乎是我所需要的,但我需要更改范围减小的列的颜色。这里中间的列有蓝色,但我需要将其更改为红色。任何线索表示赞赏。

我已经检查了填充和颜色属性,它们似乎无法与范围柱形图一起正常工作。

代码笔:https://codesandbox.io/s/apx-range-column-forked-8dv67

提前致谢。

enter image description here


我能做的最接近的事情就是设置一个fillColor对于系列中的每个数据点:

this.chartOptions = {
  series: [
    {
      name: "blue",
      data: [
        {
          x: "Team A",
          y: [0, 100],
          fillColor: "#FF0000",
        },
      ],
    },
  ],
}

不过,要实现此目的,您需要在将数据点添加到之前进行一些预处理series。您需要一个函数来检查范围是否为负数,如果是,则将颜色设置为红色。

function barColor(dataPoint1, dataPoint2) {
  return (dataPoint1 - dataPoint2) < 0 ? "" : "#FF0000";
}

有一个代码沙箱显示使用中的填充颜色.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

更改 ApexCharts 中范围柱形图的颜色 的相关文章

随机推荐