ハイチャートは、列の行に1行追加します

Question

私はハイチャートと一緒に作業しており、基本的なデュアルシリーズの縦棒グラフを持っています。下の画像の赤いボックスに示すように、チャートに単一のデータ駆動型ラインを追加したいが、私は最良のアプローチを確信している（これは今月、予測される月末の値を記録する） 。

• チャートの幅は可変であり、そのラインは
• ラインが
• 線幅が列のそれよりもわずかに広くする必要がありますのみ対象期間のための2つのシリーズの1を重ねる必要がある「応答」にする必要があります自身

私はこれを行うには3つの方法が考えられますが、最良のルートを確認していないました：

1. ハイチャートレンダラー：レンダラーを使用してデータ値にアクセスし、レンダリング位置をかなり簡単に取得でき、シェイプを描画するのは大したことではないと思います。しかし、私は、私は、最初の線が描かれるなど、 "懐疑的な"行動を持っているとは思わないが、ユーザーが画面を広げると、行の残りの部分は、レンダラーの出力は、私は、私はリサイズイベントとリンクすることができない要素が表示されません、そして、その数学はその時点で理想よりも少なくなるだろう）。
2. HTML絶対オーバーレイと、ウィンドウのサイズ変更イベントによる再配置。ここでの欠点は、必要なデータポイントの値/位置を変換し、これらの比率をresizeイベント中に維持することです。
3. 単一の値を持つ第3シリーズ。私がここで目にする問題は、列がターゲット列の上にくるように書式を設定することです（このために使用できる「単一行」型のシリーズはわかりません）。私はこれが理想的だと思う傾向があります。フォーマットを正しく設定できるかのように、それをハイチャートで表示するのは責任があります。残念ながら、必要な表示を生成するのに十分なシリーズタイプと書式設定オプションがあるかどうかはわかりません。また、シリーズの「単線」レンダリングではなく、下の列が透明な積み重ね列をハックする可能性があると考えましたが、他の書式設定の問題（既存の列の上に配置するなど）

これまで誰かがこのようなことをしていて、どのように達成されたかについていくつかの洞察を提供できましたか？ありがとう。

Answer 1

カスタムラインを描画することは私が推測する最もクリーンな解決策です。再描画イベントにフックして再配置/サイズ変更を行うことで、そのラインを簡単に反応させることができます。

一連のアプローチでは、いくつかのオプションを設定するだけで多くのコーディングは必要ありません。カスタムマーカー記号を持つスキャッタタイプを使用できます。

Highcharts.SVGRenderer.prototype.symbols.line = function(x, y, w, h) { 
    return ['M', x, y, 'L', x + w, y]; 
}; 

{ 
    type: 'scatter', 
    showInLegend: false, 
    enableMouseTracking: false, 
    marker: { 
    symbol: 'line', 
    lineColor: 'orange', 
    lineWidth: 6, 
    radius: 20 
    }, 
    data: [ 
    [1.15, 140] 
    ] 
}] 

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