javascript - 通过指定结束坐标使用 High 图表在图表顶部绘制一条小垂直线

Question

我不熟悉用于绘制图表的 High Charts。我的要求是通过指定结束坐标在已绘制图表的顶部绘制一条小垂直线。我可以使用 JqPlot 插件轻松绘制一个，图像如下所示。

我在JqPlot中使用的选项是

canvasOverlay: {
                    show: true,
                    objects: [
                        {line: {
                                name: 'stack-overflow',                                    
                                lineWidth: 6,
                                start: [8, 0.5],
                                stop:[8, 0.7],
                                color: 'rgb(100, 55, 124)',
                                shadow: false
                            }}
                    ]
                }

在一些研究中我发现我可以在 Highcharts 中使用plotLines

Stackoverflow Post

我试过这个选项，但它画了一条完整长度的红色垂直线，我没有看到任何限制线的长度的选项。

下面是我用过的代码

 xAxis: {
                    min: 0,
                    max: 35,
                    tickInterval: 5,
                    title: {text: "Time"},
                    plotLines: [{
                            color: 'red',
                            width: 5,
                            value: 5.5
                        }]

                }

更新:

JSFiddle 链接如下

JSFIddle

我是不是遗漏了什么或者我需要尝试一些其他的选择

Answer 1

您可以使用 Highcharts 渲染器 选项

function (chart) {
    var lineStartXposition2 = lineStartXposition + chart.plotLeft + 10,
        lineStartYposition2 = lineStartYposition + chart.plotTop + 10,
        lineEndXposition2 = lineEndXposition + chart.plotLeft + 10,
        lineEndYposition2 = lineEndYposition + chart.plotTop + 10;

    chart.renderer.path(['M', positionX, positionY, 'L', positionX, positionEnd])
    .attr({
        'stroke-width': 2,
        stroke: 'red'
    })
    .add();
});

更新 3:使用点坐标和变量的新 fiddle Fiddle