0,0の対角固定値を持つスプライングラフと同じようにプロットする

Question

我々は0,0を値として保存する必要があるx軸値とy軸値に問題があるという私たちのゲームにスプライングラフを使用しています。最初から最後まで、すべての値を最初から最後までプロットする必要があります。

Check Live Demo Here

JavaScriptコード

<script> 
var a = 1; 
var b = 1; 
var factor = 1.2; 
$(document).ready(function() { 
    Highcharts.chart('container', { 
     chart: { 
      type: 'spline', 
      animation: Highcharts.svg, // don't animate in old IE 
      marginRight: 10, 
      events: { 
       load: function() { 
        // set up the updating of the chart each second 
        var series = this.series[0]; 
        setInterval(function() { 
         b = b*1.2; 
         console.log(b); 
         var x = a; // current time 
         var y = b; 
          a++; 
         series.addPoint([x, y], true, true); 
        }, 700); 
       } 
      } 
     }, 
     title: { 
      text: 'Live random data' 
     }, 
     xAxis: { 
      type: 'number', 
      min: 0, 
      tickInterval: 2 
     }, 
     yAxis: { 
      title: { 
       text: 'Value' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     tooltip: { 
      formatter: function() { 
       return '<b>X: ' + this.x+', Y:'+this.y; 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     exporting: { 
      enabled: false 
     }, 
     series: [{ 
      name: 'Random data', 
      data: (function() { 
       // generate an array of random data 
       var data = [],i; 
       for (i = 1; i <= 19; i++) { 
         b = b*factor; 
         data.push({ 
          x: a, 
          y: b 
         }); 
         a++;    
       } 
       return data; 
      }()) 
     }] 
    }); 
}); 

Answer 1

次のコードは、上で更新されるエンドポイントに原点（0,0）からの曲線を描きます間隔。 addPointコールでshift変数をfalseにする必要がありました。 Higchart docs

$(document).ready(function() { 

    var a = 1; 
    var b = 1; 
    var factor = 1.2; 

    Highcharts.chart('container', { 
     chart: { 
      type: 'spline', 
      animation: Highcharts.svg, // don't animate in old IE 
      marginRight: 10, 
      events: { 
       load: function() { 
        // set up the updating of the chart each second 
        var series = this.series[0]; 
        setInterval(function() { 
         b = b*1.2; 
         var x = a; // current time 
         var y = b; 
         a++; 
         // Add new end point 
         series.addPoint([x, y], true, false); 
        }, 700); 
       } 
      } 
     }, 
     title: { 
      text: 'Live random data' 
     }, 
     xAxis: { 
      type: 'number', 
      min: 0, 
      tickInterval: 2 
     }, 
     yAxis: { 
      title: { 
       text: 'Value' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     tooltip: { 
      formatter: function() { 
       return '<b>X: ' + this.x+', Y:'+this.y; 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     exporting: { 
      enabled: false 
     }, 
     series: [{ 
      name: 'Random data', 
      data: (function() { 
       // generate an array of random data 
       // Add point at origin and last point of series 
       var data = [{x:0,y:0}],i; 
       for (i = 1; i <= 19; i++) { 
        b = b*factor; 
        a++ 
        data.push({ 
         x: a, 
         y: b 
        }); 
       } 
       return data; 
      }()) 
     }] 
    }); 
}); 

Updated JsFiddle