Question

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

stock chart

我期待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);
        }

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

1 个答案: