javascript - Highcharts:条形颜色重叠

Question

我正在尝试创建一个与条形重叠的条形 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。

http://jsfiddle.net/6chq4Lp5/

在第一种情况下，白色条与蓝色条重叠，并导致颜色“扭曲”。如果我们删除 Alpha channel ，这些蓝色条将完全消失，如第二个 fiddle 手所示:

http://jsfiddle.net/kp37e6k0/

在第一个条中，是否可以以全彩绘制蓝色条，直到达到其最大点，然后绘制白色条？ (颠倒条形的显示顺序将导致情况 2 或 3 出现相反的问题)

谢谢

Answer 1

特定点没有“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/>'
      }
    }
  ]

为了完全控制，您可能需要创建一个白色重叠的系列。

实例和输出

http://jsfiddle.net/ugwvefjt/