如何在图形上绘制断开的直线？

Question

我试图在我的图表上绘制一些直线，并且已经获得了大部分的路线，但现在我停留在偏移位置。下面的红线应该在两个标记之间画一条线，但正如你所看到的，它们很高并且离开了。

我期待plotX和plotY理清这一点对我来说，但我失去了一些东西。图表中有四个系列：绿色，蓝色，红色三角形和红色三角形。我想绘制一条连接红色三角形（第3系列）和红色三角形（第4系列）的线条。我目前正在通过循环使用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 
      } 
     ] 

Answer 1

有趣的是如何被迫把问题变成一个问题可以帮助我理清我的想法和挫折足以找到自己的答案。 ..

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); 
     }