highcharts - 渲染器将​​ Highcharts 置于前面

Question

有没有办法将 renderer.label 放在前面，这样它就不会被情节线标签覆盖？见下图

      plotbandLabel = this.renderer.label(
          (66).toFixed(2),
          chart.plotLeft + chart.plotWidth,
          yAxis.toPixels(66) - labelOffset,
          'rect'
        )
        .css({
          'color': '#FFFFFF',
          'z-index':'999'
        }).attr({
          align: 'right',
          fill: 'rgba(0, 0, 0, 0.75)',
          padding: 8,
          zIndex: 999
        })
        .add();

        yAxis.addPlotLine({
                    value: 55,
                    color: 'blue',
                    width: 3,
                    dashStyle: 'Solid',
                    zIndex: 1,
                    id: 'ahLine',
                            label: {
        text: 'testing',
        verticalAlign: 'middle',
        align: 'right',
        rotation: 0,
        useHTML: true,
        zIndex: 1,
        style: {
            "padding": "0 10px 0 0",
            "background-color": "#ffa500",//#CF2323",
            "color": "white",
            "height": "25px",
            "text-align": "center",
            "padding-top": "5px",
            "border-radius": "5px",
            "z-index":"1"
        }
    }

                });

这是我的示例代码http://jsfiddle.net/eb9mjc2j/感谢您对此的帮助。谢谢

Answer 1

发生这种情况的原因是 Highcharts 可视化的呈现方式。按照我的理解，使用 renderer 方法添加项目会创建与图表分离的 HTML 元素，而其他图表元素(例如添加到绘图线的“测试”标签)则呈现在SVG 格式。因为它们实际上生活在两个世界中，所以您永远无法使用 z-index 按照您想要的方式排列它们。 SVG 总是获胜。

看起来您已经走在正确的轨道上， fiddle 中包含一些带注释的代码。我取消了您在这里的部分的注释:

      markerLabel = this.renderer.label(
        (55).toFixed(2),
        chart.plotLeft + chart.plotWidth,
        yAxis.toPixels(55) - labelOffset,
        'rect'
      )
        .css({
        color: 'white'
      }).attr({
        align: 'right',
        fill: 'red',
        padding: 8,
        zIndex: 997
      })
        .add();    

接下来，我注释掉了情节线上的标签(橙色“测试”框)。

      yAxis.addPlotLine({
        value: 55,
        color: 'blue',
        width: 3,
        dashStyle: 'Solid',
        zIndex: 1,
        id: 'ahLine'/*,
                              label: {
          text: 'testing',
          verticalAlign: 'middle',
          align: 'right',
          rotation: 0,
          useHTML: true,
          zIndex: 1,
          style: {
              "padding": "0 10px 0 0",
              "background-color": "#ffa500",//#CF2323",
              "color": "white",
              "height": "25px",
              "text-align": "center",
              "padding-top": "5px",
              "border-radius": "5px",
              "z-index":"1"
          }
      }*/

      });

然后，为了确保第二个渲染的标签保持不变，我在 y 轴上添加了两个项目，因此最大值始终为 100。这将使图表的高度不会发生变化，并防止标签从您的图表中偏移。选择值 55。

yAxis: [{
  opposite: false,
  title: {
    enabled: false
  }, 
  max: 100, /* keep the chart's height from changing with each new point */
  showLastLabel: true /* show 100 in the axis labels; this is false by default in Highstock */
}],

这是您的 fiddle 的修订版本，其中包含这些更改:http://jsfiddle.net/brightmatrix/eb9mjc2j/4/ 。

希望这对您有帮助。