在HIghCharts.js中查找绘图线的Y轴值

Question

我正在尝试根据顶部绘图线的位置动态调整HighCharts折线图上的背景图像。我想要调整大小的图像是下图中的钟形曲线。

我无法将图像的高度设置为静态值，因为屏幕的大小可能会发生变化，而顶部的绘图线也会随着时间的推移而变化。

目前我正在使用外部函数设置绘图线的位置：

plotLines: [
                value: upperControl3()}, {
                color: '#ccc',
                zIndex: 3,
                width: 1,
                label: {
                    text: '-2s',
                    x: 520,
                    y: 3
                }

我能找到的顶部曲线的y值最接近的是dataMax值，但在每个图表加载时保持不变。 我一直在尝试使用图表末尾的函数来叠加和调整图像大小，如下所示：

function(chart) { 

   console.log(chart.yAxis[0].plotLinesAndBands[7].axis.plotLinesAndBands[0].axis);

   var h = chart.yAxis[0].plotLinesAndBands[7].axis.plotLinesAndBands[0].axis.dataMax;

   var y = chart.yAxis[0].axisTitle.y + extra;

   // X, Y, Width, Height
   chart.renderer.image('images/bell.jpg', 60, y, 200, h).add();   

}

有没有办法在highcharts中找到情节线的坐标？

Answer 1

您可以使用plotLinesAndBands对象，其中保留了plotlines。在您有值的选项中，可以通过toPixels函数将其转换为像素值。

var $button = $('#button'),
    $report = $('#report'),
    chart = $('#container').highcharts();

$button.click(function () {
    chart.xAxis[0].addPlotLine({
        value: 5.5,
        color: 'red',
        width: 2,
        id: 'plot-line-1'
    });

    var plotline = chart.xAxis[0].plotLinesAndBands[0];

    $report.html('Value: ' + plotline.options.value + ' Pixels: ' + chart.xAxis[0].toPixels(plotline.options.value));
});

http://jsfiddle.net/HhP39/1/

Answer 2

如果你知道它是哪个情节线（按索引），你可以这样做：

chart.yAxis[0].plotLinesAndBands[0].options.value

当然，您需要确保您的数据实际上是正态分布的，否则正常曲线意味着什么：）

零限制数据通常不是正常分布的。