chartjs更新数据 vue_chart.js - 动态更新chartjs ch的值

更新：看起来charjs已更新(请参阅下面的评论)。 有一些例子看起来非常好：

以下是使用新数据更新折线图的示例：[http://jsbin.com/yitep/5/edit]

以下是我们如何更新折线图上的现有数据：[http://jsbin.com/yitep/4/edit]

原帖

截至2013年11月，似乎很少有更新图表的选项。

这里有一个很好的例子(下面重复)向折线图添加新点。 仍然有点跳跃但不是太糟糕。 但是，我认为效果可能取决于您使用的图表。

它确实看起来像是在开发流程中的某个地方。 我没有看到任何发布日期的迹象：[https://github.com/nnnick/Chart.js/issues/13]

JS

$(document).ready(function(){

var count = 10;

var data = {

labels : ["1","2","3","4","5", "6", "7", "8", "9", "10"],

datasets : [

{

fillColor : "rgba(220,220,220,0.5)",

strokeColor : "rgba(220,220,220,1)",

pointColor : "rgba(220,220,220,1)",

pointStrokeColor : "#fff",

data : [65,59,90,81,56,45,30,20,3,37]

},

{

fillColor : "rgba(151,187,205,0.5)",

strokeColor : "rgba(151,187,205,1)",

pointColor : "rgba(151,187,205,1)",

pointStrokeColor : "#fff",

data : [28,48,40,19,96,87,66,97,92,85]

}

]

}

// this is ugly, don't judge me

var updateData = function(oldData){

var labels = oldData["labels"];

var dataSetA = oldData["datasets"][0]["data"];

var dataSetB = oldData["datasets"][1]["data"];

labels.shift();

count++;

labels.push(count.toString());

var newDataA = dataSetA[9] + (20 - Math.floor(Math.random() * (41)));

var newDataB = dataSetB[9] + (20 - Math.floor(Math.random() * (41)));

dataSetA.push(newDataA);

dataSetB.push(newDataB);

dataSetA.shift();

dataSetB.shift(); };

var optionsAnimation = {

//Boolean - If we want to override with a hard coded scale

scaleOverride : true,

//** Required if scaleOverride is true **

//Number - The number of steps in a hard coded scale

scaleSteps : 10,

//Number - The value jump in the hard coded scale

scaleStepWidth : 10,

//Number - The scale starting value

scaleStartValue : 0

}

// Not sure why the scaleOverride isn't working...

var optionsNoAnimation = {

animation : false,

//Boolean - If we want to override with a hard coded scale

scaleOverride : true,

//** Required if scaleOverride is true **

//Number - The number of steps in a hard coded scale

scaleSteps : 20,

//Number - The value jump in the hard coded scale

scaleStepWidth : 10,

//Number - The scale starting value

scaleStartValue : 0

}

//Get the context of the canvas element we want to select

var ctx = document.getElementById("myChart").getContext("2d");

var optionsNoAnimation = {animation : false}

var myNewChart = new Chart(ctx);

myNewChart.Line(data, optionsAnimation);

setInterval(function(){

updateData(data);

myNewChart.Line(data, optionsNoAnimation)

;}, 2000

);

});

// ChartJS

var Chart=function(s){function v(a,c,b){a=A((a-c.graphMin)/(c.steps*c.stepValue),1,0);return b*c.steps*a}function x(a,c,b,e){function h(){g+=f;var k=a.animation?A(d(g),null,0):1;e.clearRect(0,0,q,u);a.scaleOverlay?(b(k),c()):(c(),b(k));if(1