2014-06-06 34 views
0

我正面臨嚴重的問題。每當我嘗試添加從下面一點開始的任何趨勢線到圖表頂部(接近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. 普通圖表 enter image description here

  2. 圖表與趨勢線 enter image description here

回答

3

這是正常的。它正在調整圖表的高度(而不是寬度)以適應要添加的點。它增加了一點緩衝區,使圖表點更具可讀性。

0

您還可以使用最小/最大參數或設置tickPositions/tickPositioner將tick保持在相同的位置。

Docs:http://api.highcharts.com/highcharts

+0

我用yaxis的最大參數,但圖表是用直線來的。這是我的jsfiddle.net/das_palash89/kNG9t/ – Poles

+0

嗯,但我沒有看到趨勢線,誠實。 –

+0

你有點擊圖表,並提出兩點......但我在談論使用最小/最大參數後,圖形變得平坦。 – Poles