1

我正在尝试在我的图表上绘制一些直线，并且已经完成了大部分工作，但现在我被偏移量所困扰。下面的红线应该在两个标记之间画一条线，但正如您所见，它们在高处和左侧。

股票图表

我期待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
            }
        ]
4

1 回答 1

3

有趣的是，被迫将问题转化为问题如何帮助我理顺自己的想法和挫败感，足以为自己找到答案……

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);
        }
于 2012-08-16T03:33:12.307 回答