highcharts - Highstocks 折れ線グラフ: ポイント マーカーの上に固定ツールチップを使用する

Question

ナビゲーターでエリアチャートを使用しています。現在表示されているチャートで高点マーカーと低点マーカー (2 つのポイントのみ) を強調表示し、これらのマーカーの上にポイント情報を表示する固定ツールチップを表示したいと考えています。

ユーザーがナビゲーターをナビゲートすると、これらのポイントマーカーが再計算され、ツールチップがそれに続く必要があります。

[これは私が達成しようとしていることです][1] これまでのところ、高値と安値を計算し、チャート内の対応するマーカーを強調表示することができました。また、2 つのツールチップを表示することもできましたが、正確に配置されていません。ポイントマーカー付き。

![これまでのところ、これは達成されています][2]

ここに私のコードがあります:

function customTooltip(point) {
  console.log(chart);
  var text = chart.renderer.text(
  'Max',
  point.plotX + chart.plotLeft + 10,
  point.plotY + chart.plotTop - 10
).attr({
  zIndex: 5
}).add();

var box = text.getBBox();
chart.renderer.rect(box.x - 5, box.y - 5, box.width + 10, box.height + 10, 5)
  .attr({
  fill: '#FFFFEF',
  stroke: 'gray',
  'stroke-width': 1,
  zIndex: 4
  })
    .add();

}

var labelArr = [], // keeps Tooltips for High and Low
  chart = $('#container').highcharts('StockChart', {
    chart: {
        type: 'line',
        width: 900
    },
    scrollbar: {
        enabled: false
    },
    navigator: {
        top: -1,
        height: 25,
        handles: {
            backgroundColor: 'transparent',
            borderColor: 'transparent'
        }
    },
    rangeSelector: {
        inputPosition: {
            align: 'left',
            x: 10,
            y: 30
        },
        buttons: [{
            type: 'year',
            count: 1,
            text: ''
        }],
        buttonTheme: { // styles for the buttons
            fill: 'none',
            stroke: 'none',
            'stroke-width': 0,
            states: {
                hover: {
                    fill: 'none'
                },
                select: {
                    fill: 'none'
                }
            }
        },
        inputDateFormat: '%m-%d-%Y',
        inputStyle: {
            fontSize: '14px',
            borderColor: '#FFF'
        },
        selected: 0
    },
    yAxis: {
        labels: {
            align: 'right',
            x: -5,
            formatter: function () {
                return "$" + this.value;
            }
        }
    },
    xAxis: {
        type: 'datetime',
        tickWidth: 0,
        labels: {
            y: 20
        },
        dateTimeLabelFormats: {
            month: '%B'
        },
        events: {
            setExtremes: function () {
                var pointMax, pointMin, labelLength = labelArr.length;


                // Flush out Old Tooltips for High and Low
                if (labelLength > 0) {
                    for (var i = 0; i < labelLength; i++) {
                        var popVal = labelArr.pop();
                        this.chart.container.firstChild.removeChild(popVal);
                    }
                }

                $.each(this.series[0].points, function (i, point) {

                    if (!pointMax && !pointMin) pointMax = pointMin = point;
                    // If marker is enabled for any point, disable it
                    if (typeof point.marker != 'undefined') point.marker.enabled =   false;
                    // Calculate Highest point 
                    if (pointMax.y < point.y) pointMax = point;
                    // Calculate Lowest point
                    if (pointMin.y > point.y) pointMin = point;
                });

                pointMax.update({
                    marker: {
                        enabled: true
                    }
                }, false, false);

                //customTooltip( pointMax );

                pointMin.update({
                    marker: {
                        enabled: true
                    }
                }, false, false);

                //customTooltip( pointMin );
            }
        }
    },
    tooltip: {
        crosshairs: false
        /*useHTML: true,
            borderRadius: 0,
            backgroundColor: '#000',
            shadow: false,
            borderWidth: 0,
            enabled: true,
            formatter: function(){
            /* Temp Disable Custom tool-Tip
                var arr = [];
                $.each(this.points, function(k, obj){
                    arr.push( "<span style='color:#FFF'>Low price w/o sales charge</span>" );
                    arr.push( "<br>" );
                    arr.push( "<span style='font-weight:bold;color:#FFF'>$" + obj.y + "</span>" );
                    arr.push( "<br>" );
                });
                return arr.join(' '); 
            } */
    },
    plotOptions: {
        area: {
            marker: {
                fillColor: '#f7941e',
                states: {
                    hover: {
                        enabled: false
                    }
                }
            }
        },
        series: {
            point: {
                events: {
                    update: function (event) {
                        event.target.series.chart.tooltip.refresh([event.target]);
                        var cloneToolTip = event.target.series.chart.tooltip.label.element.cloneNode(true);
                        event.target.series.chart.container.firstChild.appendChild(cloneToolTip);
                        labelArr.push(cloneToolTip);
                    }
                }
            }
        }
    },
    series: [{
        name: 'Quarterly Returns w/o sales charge',
        data: [

            [1149120000000, 62.17],
            [1149206400000, 61.66],
            [1369699200000, 441.44],
            [1369785600000, 444.95]
        ]
        //  pointWidth: 14,
    }]
}).highcharts();

});

ここから先に進む方法を教えてください。