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总是赢。

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

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

以下是您对这些变化的修改版本：http://jsfiddle.net/brightmatrix/eb9mjc2j/4/。

我希望这对你有所帮助。

Answer 2

您可以渲染另一个自定义路径和标签。这样您就可以使用replace属性控制其展示位置。您也可以尝试在SVG之前放置HTML标签。

例：
http://jsfiddle.net/fbohy9od/

渲染器带到前面的高位

2 个答案: