Highchart autoscalling

Question

http://jsfiddle.net/Fr4CR/

在上述圖表中，如果值落在x軸14內，以-14和y軸1爲-1，它的繪製完美。

當這些值超出x軸14到-14和y軸1到-1之外時，它不會繪圖。

這裏，我已經創建的圖表，所有點都沒有繪製

http://jsfiddle.net/Fr4CR/3/

$(function() { 
new Highcharts.Chart({ 
    chart: { 
     type: 'scatter', 
     renderTo: 'container', 
     showAxes: true 
    }, 
    xAxis: { 
     tickInterval: 2, 
     min: -14, 
     max: 14, 
     tickLength: 0, 
     plotLines: [{ 
      value: 0, 
      width: 1, 
      color: '#999' 
     }] 
    }, 
    yAxis: { 
     tickInterval: 0.2, 
     min: -1, 
     max: 1, 
     gridLineWidth: 0, 
     lineWidth: 1, 
     plotLines: [{ 
      value: 0, 
      width: 1, 
      color: '#999' 
     }] 
    }, 
    series: [{ 
     data: [] 
    }] 
}, function (chart) { 

    var xData = [1, 2, 3, 4, 5, 10], 
     yData = [0.5356899, -20.5356899, 0.6356899, 
       0.2356899, 0.3356899, 40.1356899], 
     series = chart.series[0], 
     i = 0; 

    setInterval(function() { 
     var shift = series.data.length > 20, 
      x = xData[i], 
      y = yData[i]; 

     if (!x || !y) 
      return; 

     series.addPoint([x, y], true, shift); 
     i++; 
    }, 1000); 


    var renderer = chart.renderer, 
     xAxis = chart.xAxis[0], 
     yAxis = chart.yAxis[0], 
     step = 2 * Math.PI/72, 
     theta = 0, 
     d = ['M'], 
     h = 0, 
     k = 0, 
     r = 1, 
     x, 
     y; 

    for (; theta < 2*Math.PI; theta += step) { 
     x = h + 10 * r * Math.cos(theta); 
     y = k - 0.5 * r * Math.sin(theta); 

     d.push(xAxis.toPixels(x), yAxis.toPixels(y), 'L'); 
    } 

    d[d.length - 1] = 'Z'; 

    renderer.path({ 
     d: d, 
     stroke: 'red', 
     strokeWidth: 2 
    }).add(); 
}); 

}）;

Answer 1

這是因爲您已經在X軸和Y軸上綁定了最小值和最大值。

替換的代碼

xAxis: { 
     tickInterval: 2, 
     min: -14, 
     max: 14, 
     tickLength: 0, 
     plotLines: [{ 
      value: 0, 
      width: 1, 
      color: '#999' 
     }] 
    }, 
    yAxis: { 
     tickInterval: 0.2, 
     min: -1, 
     max: 1, 
     gridLineWidth: 0, 
     lineWidth: 1, 
     plotLines: [{ 
      value: 0, 
      width: 1, 
      color: '#999' 
     }] 

該部分通過該一個

xAxis: { 
     tickInterval: 2, 
     tickLength: 0, 
     plotLines: [{ 
      value: 0, 
      width: 1, 
      color: '#999' 
     }] 
    }, 
    yAxis: { 
     tickInterval: 0.2, 
     gridLineWidth: 0, 
     lineWidth: 1, 
     plotLines: [{ 
      value: 0, 
      width: 1, 
      color: '#999' 
     }] 

Answer 2

它通過設置最低和最高值兩者，X軸Y軸和引起的。您需要使用chart.x/yAxis.setExtremes（）函數來設置新的極值並繪製新的（或更新舊的）橢圓。