ширина диаграммы изменяется при добавлении линии тренда в highcharts

Я столкнулся с серьезной проблемой. Всякий раз, когда я пытаюсь добавить какую-либо линию тренда, начинающуюся чуть ниже и заканчивая верхней частью графика (примерно под углом 70-85 градусов), она меняет свою ширину. Но в случае вертикальной и горизонтальной линии я не сталкиваюсь с проблемой. Есть ли способ предотвратить это?

Мой код:

$(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.

Пожалуйста, проверьте изображения также.

  1. Нормальная диаграмма введите здесь описание изображения

  2. Диаграмма с линией тренда введите здесь описание изображения


person Poles    schedule 06.06.2014    source источник


Ответы (2)


Это нормально. Он регулирует высоту диаграммы (а не ширину) для размещения точек, которые вы добавляете. Он добавляет небольшой буфер, чтобы сделать точку диаграммы более читаемой.

person wergeld    schedule 06.06.2014

Вы также можете использовать параметры min/max или установить tickPositions / tickPositioner, чтобы тики всегда оставались в одних и тех же позициях.

Документы: http://api.highcharts.com/highcharts

person Sebastian Bochan    schedule 09.06.2014
comment
Я использовал максимальный параметр для оси y, но график идет с прямой линией. Вот мой jsfiddle jsfiddle.net/das_palash89/kNG9t - person Poles; 10.06.2014
comment
Ну, но я не вижу линии тренда, если честно. - person Sebastian Bochan; 10.06.2014
comment
вы нажимаете на график и ставите две точки... но я говорю о том, что после использования параметров min/max график стал плоским. - person Poles; 12.06.2014
comment
Я только что объяснил это в комментариях вверху. Не могли бы вы помочь мне с правильным кодом, чтобы ограничить изменения ширины диаграммы при добавлении линий тренда? Спасибо. - person Poles; 17.06.2014