レンダラー前のハイチャートに移動

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

これが起こっている理由は、ハイチャートの視覚化がどのようにレンダリングされるかに起因します。私がそれを理解し、rendererメソッドを使ってアイテムを追加すると、グラフとは別のHTML要素が作成されますが、プロットラインに追加された "テスト"ラベルなどの他のグラフ要素はSVGフォーマットでレンダリングされます。彼らは効果的に2つの世界に住んでいるので、あなたは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();  

次へ：私はあなたがここにいたのセクションをコメント解除しました。最大値は、これは高さにシフトするから、あなたのチャートを維持してからラベルを防ぐことができます常に100ですので

 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軸に2つの項目を追加しましたhttp://jsfiddle.net/brightmatrix/eb9mjc2j/4/：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 */ 
}], 

のあなたの選択した値からのオフセットを取得ここでは、これらの変更であなたのフィドルの改訂版です。

私はこれがあなたに役立つことを願っています。

Answer 2

別のカスタムパスとラベルをレンダリングすることができます。この方法で、zIndexプロパティで配置を制御できます。 SVGの前にHTMLラベルを置くこともできます。

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