Highcharts：条形重叠的颜色

Posted 2021-05-05

我正在尝试创建一个与条形图重叠的类型栏高图。一切都很好，但我不喜欢如何在图像中显示：

我不喜欢值'2010'中的白条与蓝色重叠。可以显示蓝色直到白色开始出现？我想要这样的东西：

正如您所看到的，此图像中的颜色不重叠，蓝色只有颜色才会显示，而蓝色完成后白色开始获得自己的颜色。

我的plotOptions是这样的：

    plotOptions: {
        bar: {
            grouping: false,
            shadow: false,
            dataLabels: {
                enabled: true,
                color: "black",
                x: -50
            }
        },

        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    }

而且，数据通过c＃中的控制器传递。该系列是：

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问题。

http://jsfiddle.net/6chq4Lp5/

在第一种情况下，白条与蓝条重叠，并导致颜色“失真”。如果我们移除alpha通道，这些蓝色条将完全消失，如第二个提琴手所示：

http://jsfiddle.net/kp37e6k0/

在第一个条形图中，可以绘制全彩色的蓝色条，达到最大点，然后绘制白色条形图？ （反转条形的显示顺序将导致案例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/>'
      }
    }
  ]

要完全控制，您可能需要创建白色重叠系列。

Live example and output

http://jsfiddle.net/ugwvefjt/