独自のCSSでyAxisプロットラインを設計するにはどうすればよいですか？

Question

すでにラベルスタイルで通常のyAxisプロットラインを作成しました。しかし、今ではいくつかのCSSスタイルでyAxisプロットラインを作成したいと思います。助言がありますか？ これは私がこれまでにしようとしているものです これは、ここに私のコード

var chart = $('#tv_chart_container').highcharts(); 
chart.yAxis[0].removePlotLine('hori_line'); 
          data = chart.series[0].data; 
    var test = data.length; 
    var value = data[999].y; 
    chart.yAxis[0].addPlotLine({ 
    value: value, // Value of where the line will appear 
    width: 2 , 
    color: '#248EC6', 
    // dashStyle: 'dash', 
    id: 'hori_line', 
    label: { 
    text: value, 
    align: 'right', 
    style: { 
     color: '#FFFFFF', 
     fontWeight: 'bold', 

    } 
    } 

    }); 

である私はかなり近づく概念実証を後処理し

Answer 1

私は実際に必要sample.Whatですあなたが求めているものに。これはHighcharts内のすべてのコードを使用しており、外部のCSSを扱うものではありません。

プロットラインには、探しているデータラベルの書式設定ができないため、代わりにラインとして機能する散布図シリーズを使用しました。さらに、これは、折れ線グラフの新しいポイントを移動するときに、（デフォルトの）Highchartsアニメーションも表示します。

私はここにいくつかのことでした：

1. を、私は、ユーザーが凡例に表示されませんと相互作用することはできません別の「ダミー」シリーズとして、散布図のラインを追加しました。
2. 散布図の最後の（2番目の）点のデータラベルを書式設定して、例のように青い背景と白い数字を表示します。
3. 分散プロット線の最後（2番目）の点に菱形のマーカーを設定しました。データラベルの設定とともに、上に示したマーカーの例が表示されます。今、データラベルのためのshape: 'callout'オプションがありますが、カラットはこの種のシリーズのために上下を指しています。
4. プロットラインを追加したり削除したりする代わりに、mouseOverイベントを更新して散布図の値を更新しました。

ここに、概念実証のフィドルがあります：http://jsfiddle.net/brightmatrix/tzu3khp1/です。以下の結果のスクリーンショットを見ることもできます。

この情報がすべてあなたに役立つことを願っています。ご不明な点がございましたらお知らせください。私はこの答えを更新して丁寧に更新してうれしい。