【问题标题】:Gradient in color of range column chart in ApexChartsApexCharts中范围柱形图的颜色渐变
【发布时间】:2021-05-19 06:41:51
【问题描述】:

我正在尝试使用 ApexCharts 为我的 1 个项目实施瀑布图。此图表不适用于 ApexCharts 开箱即用。所以,我正在尝试将范围柱形图修改为瀑布图。这几乎是我所需要的,但我需要更改范围减小的列的颜色。这里中间的列是蓝色的,但我需要将其更改为动态渐变颜色取决于值

例如,对于负值,我需要它从浅橙色变为深橙色,对于正值,我需要它从浅蓝色变为深蓝色。

感谢任何潜在客户。

我已经检查了填充和颜色属性,它们似乎不适用于范围柱形图。

这与:Change color of range column chart in ApexCharts 有关,但我需要一个渐变而不是填充颜色,它似乎只需要一个字符串。

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

提前致谢!

【问题讨论】:

  • 烛台图是一种允许这样做的图表类型,但由于它是用于时间序列的,因此这里的 x 轴不一致。

标签: javascript reactjs charts gradient apexcharts


【解决方案1】:

使用以下方法修复它。

我添加一个这样的填充属性。

            fill: {
                type: ["gradient"],
                gradient: {
                    shade: "light",
                    type: "horizontal",
                    shadeIntensity: 0.25,
                    opacityFrom: 0.4,
                    opacityTo: 0.9,
                    stops: [0, 100]
                }
            }

每个数据点对象上的 fillColor 属性仍然存在,并且渐变应用于每种颜色。

【讨论】:

  • 传递自定义颜色代码的选项在哪里?
猜你喜欢
  • 1970-01-01
  • 2013-01-14
  • 1970-01-01
  • 1970-01-01
  • 2021-12-21
  • 1970-01-01
  • 2022-12-30
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多