在 ApexCharts 中更改范围柱形图的颜色
Change color of range column chart in ApexCharts
我正在尝试使用 ApexCharts 为我的 1 个项目实现瀑布图。此图表无法随 ApexCharts 开箱即用。所以,我试图将范围柱形图修改为瀑布图。
这几乎是我所需要的,但我需要更改范围减小的列的颜色。这里中间的列是蓝色的,但我需要将其更改为红色。感谢任何潜在客户。
我已经检查了填充和颜色 属性,它们似乎无法与范围柱形图一起正常工作。
代码笔:https://codesandbox.io/s/apx-range-column-forked-8dv67
提前致谢。
我能做的最接近的事情是为系列中的每个数据点设置 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";
}
有一个代码沙盒显示 fillColor in use。
我正在尝试使用 ApexCharts 为我的 1 个项目实现瀑布图。此图表无法随 ApexCharts 开箱即用。所以,我试图将范围柱形图修改为瀑布图。 这几乎是我所需要的,但我需要更改范围减小的列的颜色。这里中间的列是蓝色的,但我需要将其更改为红色。感谢任何潜在客户。
我已经检查了填充和颜色 属性,它们似乎无法与范围柱形图一起正常工作。
代码笔:https://codesandbox.io/s/apx-range-column-forked-8dv67
提前致谢。
我能做的最接近的事情是为系列中的每个数据点设置 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";
}
有一个代码沙盒显示 fillColor in use。