減少距離

Question

我tryng減少下面的代碼在圖表上的數據點之間的距離是從highcharts例如

$(function() { 
$(document).ready(function() { 
    Highcharts.setOptions({ 
     global: { 
      useUTC: false 
     } 
    }); 

    var chart; 
    $('#container').highcharts({ 
     chart: { 
      type: 'spline', 
      animation: Highcharts.svg, // don't animate in old IE 
      marginRight: 5, 
      events: { 
       load: function() { 

        // set up the updating of the chart each second 
        var series = this.series[0]; 
        setInterval(function() { 
         var x = (new Date()).getTime(), // current time 
          y = Math.random(); 
         series.addPoint([x, y], true, true); 
        }, 1000); 
       } 
      } 
     }, 
     title: { 
      text: 'Live random data' 
     }, 
     xAxis: { 
      type: 'datetime', 
      tickPixelInterval: 50 // here i wanted to decerease bu it does not work 
     }, 
     yAxis: { 
      title: { 
       text: 'Value' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 0.1, 
       color: '#808080' 
      }] 
     }, 
     tooltip: { 
      formatter: function() { 
        return '<b>'+ this.series.name +'</b><br/>'+ 
        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+ 
        Highcharts.numberFormat(this.y, 2); 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     exporting: { 
      enabled: false 
     }, 
     series: [{ // series with random data 
      name: 'Random data', // may be here 
      data: (function() { 
       // generate an array of random data 
       var data = [], 
        time = (new Date()).getTime(), 
        i; 

       for (i = -19; i <= 0; i++) { 
        data.push({ 
         x: time + i * 1000, 
         y: Math.random() 
        }); 
       } 
       return data; 
      })() 
     }] 
    }); 
}); 

    }); 

http://jsfiddle.net/V9BV4/

是否有可能做什麼呢？我需要縮小X軸或上線

Answer 1

減少點之間的距離爲了做到你的要求，你不妨考慮：

1）製作圖表小，所以各個點靠得更近（見http://jsfiddle.net/brightmatrix/Gq9X9/）：

chart: { 
    vtype: 'spline', 
    width: 300,  /* make this value anything you want */ 
    animation: Highcharts.svg, // don't animate in old IE 
    marginRight: 5, 
    ... 

這類似於上面@falconw所提供的建議。

2）在這個特定的實時比如，更改您的數據是如何被計算，這樣你每次圖表被更新時推出更多的點（見http://jsfiddle.net/brightmatrix/Fp5K4/）：

series: [{ 
    name: 'Random data', 
    data: (function() { 
     // generate an array of random data 
      var data = [], 
      time = (new Date()).getTime(), 
      i; 
      for (i = -19; i <= 0; i++) { 
       data.push({ 
        /* made the multiplier larger so points are closer together */ 
        x: time + i * 10000,  
        y: Math.random() 
       }); 
      } 
     return data; 
    })() 
}] 

底線，要麼改變你的圖表維度，要麼讓你的數據「更密集」，這樣點就更接近了。我希望這有幫助。