渲染器带到最前面的highcharts

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

这是我的示例代码

---

谢谢你在这方面的帮助。谢谢

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

看起来您已经走上了正确的轨道，在您的小提琴中有一些注释代码。我取消了您在此处的部分注释：

      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 */
}],

以下是您对这些更改的修订版本：

---

我希望这对您有所帮助。

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

看起来您已经走上了正确的轨道，在您的小提琴中有一些注释代码。我取消了您在此处的部分注释：

      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 */
}],

以下是您对这些更改的修订版本：

---

我希望这对您有所帮助。

您可以渲染另一个自定义路径和标签。通过这种方式，可以使用zIndex属性控制它们的位置。您还可以尝试将HTML标签放在SVG之前

例如：

---

您可以渲染另一个自定义路径和标签。通过这种方式，可以使用zIndex属性控制它们的位置。您还可以尝试将HTML标签放在SVG之前

例如：