Question

我正面临一个严重的问题。每当我尝试将任何趋势线从下面的位置添加到图表的顶部（接近约70-85度角）时，它会改变其宽度。但是对于垂直和horizental线我不会遇到问题。有什么方法可以防止这种情况吗？

我的代码是：

$(function() {
            $.getJSON('http://api-sandbox.oanda.com/v1/candles?instrument=EUR_USD&candleFormat=midpoint&granularity=W', function(data) {
        // create the chart
        var onadata =[];
        var yData=[];       
        var type='line';            
        var datalen=data.candles.length;
        var all_points= [];
        var all_str="";

        for(var i=0; i<datalen;i++)
        {
            var each=[Date._parse(data.candles[i].time), data.candles[i].openMid, data.candles[i].highMid, data.candles[i].lowMid, data.candles[i].closeMid]
            onadata.push(each);
            yData.push(data.candles[i].closeMid);
        }

        chart();

        function chart()
        {
            $('#container').highcharts('StockChart', {

                    credits: {
                        enabled : 0
                    },

                    rangeSelector : {
                        buttons: [{
                            type: 'month',
                            count: 1,
                            text: '1M'
                        }, {
                            type: 'month',
                            count: 3,
                            text: '3M'
                        },{
                            type: 'month',
                            count: 6,
                            text: '6M'
                        },{
                            type: 'all',
                            text: 'All'
                        }], 
                        selected:3      
                    },

                    legend: {
                        enabled: true,
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        borderWidth: 0
                    },

                    title : {
                        text : 'Stock Price'
                    },

                    xAxis :{
                        minRange : 3600000
                    },

                    chart: {
                        events: {
                            click: function(event) {                                
                                var x1=event.xAxis[0].value;
                                var x2 =this.xAxis[0].toPixels(x1);             
                                var y1=event.yAxis[0].value;
                                var y2 =this.yAxis[0].toPixels(y1);

                                selected_point='['+x1+','+y1+']';                             
                                all_points.push(selected_point);
                                all_str=all_points.toString();                               
                                if(all_points.length>1)
                                {

                                    this.addSeries({                            
                                    type : 'line',
                                    name : 'Trendline',
                                    id: 'trend',    
                                    data: JSON.parse("[" + all_str + "]"),                      
                                    color:'#'+(Math.random()*0xEEEEEE<<0).toString(16),
                                    marker:{enabled:true}
                                    });

                                }

                                if(all_points.length==2)
                                {
                                    all_points=[];
                                }


                            }

                        }       
                    },

                    series : [{
                        //allowPointSelect : true,
                        type : type,
                        name : 'Stock Price',
                        id: 'primary',
                        data : onadata,
                        tooltip: {
                            valueDecimals: 5,
                            crosshairs: true,
                            shared: true
                        },
                        dataGrouping : {

                            units : [
                                [
                                    'hour',
                                    [1, 2, 3, 4, 6, 8, 12]
                                ], [
                                    'day',
                                    [1]
                                ], [
                                    'week',
                                    [1]
                                ], [
                                    'month',
                                    [1, 3, 6]
                                ], [
                                    'year',
                                    [1]
                                ]
                            ]
                        }
                    },
                    ]
                });
        }


    });
});

这是我的JSfiddle。

请检查图像。

正常图表
包含趋势线的图表

Answer 1

这很正常。它正在调整图表的高度（而不是宽度）以适应您要添加的点。它增加了一点缓冲区，使图表点更具可读性。

Answer 2

您还可以使用min / max参数或设置tickPositions / tickPositioner来保持刻度始终位于相同的位置。

文档：http://api.highcharts.com/highcharts

在highcharts中添加趋势线时，图表宽度会发生变化

2 个答案: