Highcharts 如何在图形上绘制不连续的直线?

Highcharts 如何在图形上绘制不连续的直线?,highcharts,highstock,Highcharts,Highstock,我试着在我的图表上画一些直线,并且已经得到了大部分的方法,但是现在我被偏移卡住了。下面的红线应该在两个标记之间画一条线,但正如你所看到的,它们是高的和左的 我原以为plotX和plotY会帮我解决这个问题,但我遗漏了一些东西。图表中有四个系列:绿色、蓝色、红色三角形和红色三角形。我想画一条线连接红色三角形(第三系列)和红色三角形向下(第四系列)。我目前正在通过一个回调来实现这一点,它在系列3上循环,并使用plotX和plotY添加路径 现在看起来是这样的,但我对更好的方法持开放态度 f

我试着在我的图表上画一些直线,并且已经得到了大部分的方法,但是现在我被偏移卡住了。下面的红线应该在两个标记之间画一条线,但正如你所看到的,它们是高的和左的

我原以为
plotX
plotY
会帮我解决这个问题,但我遗漏了一些东西。图表中有四个系列:绿色、蓝色、红色三角形和红色三角形。我想画一条线连接红色三角形(第三系列)和红色三角形向下(第四系列)。我目前正在通过一个回调来实现这一点,它在系列3上循环,并使用plotX和plotY添加路径

现在看起来是这样的,但我对更好的方法持开放态度

    function(){
        var chart = this;
        $.each(chart.series[2].data, function(index, value){
            startX = chart.series[2].data[index].plotX;
            startY = chart.series[2].data[index].plotY;
            endX = chart.series[3].data[index].plotX
            endY = chart.series[3].data[index].plotY
            chart.renderer.path(['M', startX, startY, 'L', endX, endY])
                    .attr({ 'stroke-width': 2, stroke: 'red' })
                    .add();
            console.log(index, startX, startY, endX, endY);
        })
    });
轴和其他一切看起来像:

$(document).ready(function () {
    chart1 = new Highcharts.StockChart({
        chart:{
            renderTo:'container'
        },
        yAxis:[
            { // Leader yAxis
                labels:{
                    formatter:function () { return "$" + this.value.toFixed(2); },
                    style:{ color:'green' }
                },
                title:{
                    text:'Leader',
                    style:{ color:'green' }
                }
            },
            { // Follower yAxis
                title:{
                    text:'Follower',
                    style:{ color:'#4572A7' }
                },
                labels:{
                    formatter: function () { return "$" + this.value.toFixed(2); },
                    style: { color:'#4572A7' }
                },
                opposite: true
            }],
        series:[
            {
                type: 'line',
                name: 'Buyer Moving Average',
                data: buyer,
                color: 'green',
                yAxis: 1
            },{
                type:'line',
                name:'Data',
                data: equity,
                color: "#4572A7",
                yAxis: 0
            },{
                type: 'scatter',
                name: 'Buys',
                data: buys,
                color: 'red',
                marker: { symbol: "triangle" },
                yAxis: 0
            },{
                type:'scatter',
                name:'Sells',
                data: [{{ sells }}],
                color: 'red',
                marker: { symbol: "triangle-down" },
                yAxis: 0
            }
        ]

有趣的是,被迫把一个问题变成一个问题,帮助我理顺了自己的思想和挫折,为自己找到了答案

plotX和plotY属性不考虑轴引入的标签和其他内容,因此只需找到它们创建的偏移并将其添加到:

     function(){
        var chart = this;
        xoffset = chart.series[2].xAxis.left;
        yoffset = chart.series[2].xAxis.top;
        $.each(chart.series[2].data, function(index, value){
            startX = chart.series[2].data[index].plotX + xoffset;
            startY = chart.series[2].data[index].plotY + yoffset;
            endX = chart.series[3].data[index].plotX + xoffset;
            endY = chart.series[3].data[index].plotY + yoffset;
            chart.renderer.path(['M', startX, startY, 'L', endX, endY])
                    .attr({ 'stroke-width': 2, stroke: 'red' })
                    .add();
            console.log(index, chart.series[2].xAxis.left, startX, startY, endX, endY);
        }