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轴运动

回答

相关问题