javascript - 在HIghCharts.js中找到绘图线的Y轴值

我正在尝试根据顶部绘图线的位置动态调整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();

}

有什么办法可以在高图中找到绘图线的坐标？

最佳答案

您可以使用plotLinesAndBands对象，其中保留了绘图线。在具有值的选项中，可以通过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/

关于javascript - 在HIghCharts.js中找到绘图线的Y轴值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22202732/