减少距离

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; 
    })() 
}] 

底线，要么改变你的图表维度，要么让你的数据“更密集”，这样点就更接近了。我希望这有帮助。