マーカーが表示される前に線を引くハイチャート

Question

ハイチャートを使用して動的更新を行っています。 マーカーが現れる前に、次のポイントで最初に行が移動する方法はありますか？ 現在、何が起こっているかは、マーカーが、線が接続される前の最初の点に表示されることです。

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

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() { 
        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: 150 
    }, 
    yAxis: { 
     title: { 
      text: 'Value' 
     }, 
     plotLines: [{ 
      value: 0, 
      width: 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: [{ 
     name: 'Random data', 
     data: (function() { 
      // generate an array of random data 
      var data = [], 
       time = (new Date()).getTime(), 
       i; 

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

とも私は右が常に

を参照してください下の画像のように空白になりますように、中央にラインの動きを移動するために何ができる方法があればこのlinkです。 あなたのお手伝いをよろしくお願いします。ありがとうございました。

Answer 1

軸の間隔をminPadding（左のスペース）とmaxPadding（右のスペース）で設定できます。アニメーションのよう

xAxis: { 
    type: 'datetime', 
    tickPixelInterval: 150, 
    maxPadding: 0.5 
}, 

- あなたは無効にマーカーで点を追加し、アニメーションが終了すると、それはマーカーを有効にします後に起動しますタイムアウトを設定することができます。デフォルトでは

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: x, 
      y: y, 
      marker: { 
      enabled: false 
      } 
     }, true, true); 

     setTimeout(() => series.data[series.data.length - 1].update({marker: {enabled: true}}, true, false), 500) 
     }, 1000); 
    } 

あなたはアニメーションadurationを変更した場合のポイントを追加するためのアニメーションがそのように500に設定されている、あなたはのsetTimeoutの遅延のparamを変更する必要があります。

例：http://jsfiddle.net/687215jj/1/