我正在尝试创建一个与条形重叠的条形 Highcharts 。一切工作正常,但我不喜欢如图所示的显示方式:
我不喜欢值“2010”中的白色条与蓝色重叠。是否可以显示蓝色直到白色开始出现?我想要这样的东西:
正如您所看到的,颜色在此图像中没有重叠,蓝色仅在达到值之前才采用颜色,而白色在蓝色完成后开始获得自己的颜色。
我的绘图选项是这样的:
plotOptions: {
bar: {
grouping: false,
shadow: false,
dataLabels: {
enabled: true,
color: "black",
x: -50
}
},
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
}
而且,数据是通过 C# 中的 Controller 获取的。该系列是:
series = new List<series>() {
new series { name = "BarBlue", data = new int[] {400, 350, 420 }, color = "rgb(0, 0, 255)", borderColor = "#FFFFFF"},
new series { name = "BarWhite", data = new int[] { 510, 200, 320 }, color = "rgb(255, 255, 255)", borderColor = "#000000" },
}
最后,我尝试将颜色设置为 rgba,但它混合了条形的颜色,我不喜欢这样,我只想显示条形的完整颜色。
为了在代码中清楚地看到错误,我在这里将 alpha 问题留给了 fiddler。
在第一种情况下,白色条与蓝色条重叠,并导致颜色“扭曲”。如果我们删除 Alpha channel ,这些蓝色条将完全消失,如第二个 fiddle 手所示:
在第一个条中,是否可以以全彩绘制蓝色条,直到达到其最大点,然后绘制白色条? (颠倒条形的显示顺序将导致情况 2 或 3 出现相反的问题)
谢谢
最佳答案
特定点没有“zIndex”选项 - 它只能按系列设置。
您可以将主系列分为基础系列和重叠系列。将重叠系列链接到基本系列并将其工具提示设置为具有基本名称。
例如:
series: [{
name: "Blue",
color: "rgba(0, 0, 153, 1)",
borderColor: "#000000",
data: [null, 350, 420]
},
{
name: "White",
color: "rgba(245,245,220, 1)",
borderColor: "#000000",
data: [510, 200, 320]
}, {
name: 'Blue - overlapping',
color: "rgba(0, 0, 153, 1)",
borderColor: "#000000",
data: [400, null, null],
linkedTo: 0,
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> Blue: <b>{point.y}</b><br/>'
}
}
]
为了完全控制,您可能需要创建一个白色重叠的系列。
实例和输出
关于javascript - Highcharts:条形颜色重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48987889/