Chartjs實時圖形x軸運動

我想顯示Chartjs圖表，它顯示實時數據並沿着x軸緩慢滾動，我在這裏用js小提琴嘗試過它，它只是像上下瘋狂跳躍：https://jsfiddle.net/rsnufpq7/Chartjs實時圖形x軸運動

該圖應該只是移動到左側與老點出的觀點沒有這個動畫就像在第二個例子中的位置：https://bost.ocks.org/mike/path/

var canvas = document.getElementById('myChart'); 
var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      fill: false, 
      lineTension: 0.0, 
      backgroundColor: "rgba(75,192,192,0.4)", 
      borderColor: "rgba(75,192,192,1)", 
      borderCapStyle: 'butt', 
      borderDash: [], 
      borderDashOffset: 0.0, 
      borderJoinStyle: 'miter', 
      pointBorderColor: "rgba(75,192,192,1)", 
      pointBackgroundColor: "#fff", 
      pointBorderWidth: 1, 
      pointHoverRadius: 5, 
      pointHoverBackgroundColor: "rgba(75,192,192,1)", 
      pointHoverBorderColor: "rgba(220,220,220,1)", 
      pointHoverBorderWidth: 2, 
      pointRadius: 5, 
      pointHitRadius: 10, 
      data: [65, 59, 80, 0, 56, 55, 40], 
     } 
    ] 
}; 

var zero = 7; 
function adddata(){ 

    var value = Math.floor((Math.random() * 10) + 1);; 
     myLineChart.data.labels.push(zero); 
     myLineChart.data.labels.splice(0, 1); 
    myLineChart.data.datasets[0].data.splice(0, 1); 
    myLineChart.data.datasets[0].data.push(value); 


    myLineChart.update(); 
    zero++; 
} 



    setInterval(function(){ 
    adddata(); 
    },1000); 

var option = { 
    showLines: true 
}; 
var myLineChart = Chart.Line(canvas,{ 
    data:data, 
    options:option 
});

來源

2017-08-13 Max

您的代碼正常工作，您只缺事是你的y軸沒有定義範圍，它正在動態調整。

爲了實現這一點，我已經擴展你的選擇，看起來像這樣。

var option = { 
    showLines: true, 
    scales: { 
    yAxes: [{ 
     display: true, 
     ticks: { 
     beginAtZero:true, 
     min: 0, 
     max: 100 
     } 
    }] 
    } 
};

我已經定義的最低和最高值用於Y軸和它不跳躍了。

這裏是一個工作fiddle

來源

2017-08-13 19:53:36

這不是指什麼，我都問，是否有可能禁用動畫，只是滑動圖表左側？ – Max

@最大隻是關於彈跳上下部分而已。關於動畫，我只發現如何禁用動畫，但不知道如何讓它們從右向左滑動。禁用動畫使用'動畫：{duration：0}，'。這是一個更新[小提琴]的鏈接（https://jsfiddle.net/kukicvladimir/3xzja4tL/4/）。 –

Chartjs實時圖形x軸運動

回答

相關問題