动态更新chartjs图表的值

Posted

技术标签:

【中文标题】动态更新chartjs图表的值【英文标题】:Dynamically update values of a chartjs chart 【发布时间】:2013-06-25 14:30:39 【问题描述】:

我使用 chartjs 创建了一个基本条形图,它工作正常。现在我想在基于时间的间隔上更新值。我的问题是创建图表后,我不知道如何正确更新其值...

我的代码:

var ctx = $("#myChart").get(0).getContext("2d");

var dts = [
    
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,1)",
        data: [0, 0, 0, 0, 0]
    
];

var data = 
    labels: ["Core#1", "Core#2", "Core#3", "Core#4", "Total"],
    datasets: dts
;

var chart = new Chart(ctx);
chart.Bar(data);

//test code
setInterval( function ()                         
    data.datasets[0].data = [random(), random(), random(), random(), random()];
    chart.Bar(data);

,2000);

在测试代码中,我使用datasets[0].data 更新值-这是正确的做法吗?问题在于,每次我调用chart.Bar() 时,这些值都会重置为 0,然后动画为随机值(就像我正在重新创建图表一样)。这样,所有动画总是从 0 到看起来很奇怪的值。我希望如果我将值从 50 更新到 10,条形图将从 50 下降到 10,而不是设置为 0,然后动画到 10。

我在文档中没有找到任何关于此的内容...我做错了什么还是这个库不可能做到这一点?

【问题讨论】:

对于最新的 ChartJS 2 示例,请参阅 Aus 在最佳答案中的重要评论 ***.com/a/61154847/10976088 【参考方案1】:

更新: 看起来 chartjs 已更新(见下方评论)。上面有一些看起来很不错的例子:

    以下是使用新数据更新折线图的示例:http://jsbin.com/yitep/5/edit 我们可以通过以下方式更新折线图上的现有数据:http://jsbin.com/yitep/4/edit

原帖

截至 2013 年 11 月,用于更新图表的选项似乎很少。

有一个good example here(重复如下)向折线图添加新点。仍然有点跳动,但还不错。但是,我认为效果可能取决于您使用的图表。

看起来这确实是在开发管道中的某个地方。不过,我还没有看到任何发布日期的迹象:https://github.com/nnnick/Chart.js/issues/13 [2014 年 7 月 26 日关闭]

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*afunction 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>=g)D(h);else if("function"==typeof a.onAnimationComplete)a.onAnimationComplete()var f=a.animation?1/A(a.animationSteps,Number.MAX_VALUE,1):1,d=B[a.animationEasing],g=a.animation?0:1;"function"!==typeof c&&(c=function());D(h)function C(a,c,b,e,h,f)var d;a=
Math.floor(Math.log(e-h)/Math.LN10);h=Math.floor(h/(1*Math.pow(10,a)))*Math.pow(10,a);e=Math.ceil(e/(1*Math.pow(10,a)))*Math.pow(10,a)-h;a=Math.pow(10,a);for(d=Math.round(e/a);d<b||d>c;)a=d<b?a/2:2*a,d=Math.round(e/a);c=[];z(f,c,d,h,a);returnsteps:d,stepValue:a,graphMin:h,labels:cfunction z(a,c,b,e,h)if(a)for(var f=1;f<b+1;f++)c.push(E(a,value:(e+h*f).toFixed(0!=h%1?h.toString().split(".")[1].length:0)))function A(a,c,b)return!isNaN(parseFloat(c))&&isFinite(c)&&a>c?c:!isNaN(parseFloat(b))&&
isFinite(b)&&a<b?b:afunction y(a,c)var b=,e;for(e in a)b[e]=a[e];for(e in c)b[e]=c[e];return bfunction E(a,c)var b=!/\W/.test(a)?F[a]=F[a]||E(document.getElementById(a).innerhtml):new Function("obj","var p=[],print=function()p.push.apply(p,arguments);;with(obj)p.push('"+a.replace(/[\r\t\n]/g," ").split("<%").join("\t").replace(/((^|%>)[^\t]*)'/g,"$1\r").replace(/\t=(.*?)%>/g,"',$1,'").split("\t").join("');").split("%>").join("p.push('").split("\r").join("\\'")+"');return p.join('');");return c?
b(c):bvar r=this,B=linear:function(a)return a,easeInQuad:function(a)return a*a,easeOutQuad:function(a)return-1*a*(a-2),easeInOutQuad:function(a)return 1>(a/=0.5)?0.5*a*a:-0.5*(--a*(a-2)-1),easeInCubic:function(a)return a*a*a,easeOutCubic:function(a)return 1*((a=a/1-1)*a*a+1),easeInOutCubic:function(a)return 1>(a/=0.5)?0.5*a*a*a:0.5*((a-=2)*a*a+2),easeInQuart:function(a)return a*a*a*a,easeOutQuart:function(a)return-1*((a=a/1-1)*a*a*a-1),easeInOutQuart:function(a)return 1>(a/=0.5)?
0.5*a*a*a*a:-0.5*((a-=2)*a*a*a-2),easeInQuint:function(a)return 1*(a/=1)*a*a*a*a,easeOutQuint:function(a)return 1*((a=a/1-1)*a*a*a*a+1),easeInOutQuint:function(a)return 1>(a/=0.5)?0.5*a*a*a*a*a:0.5*((a-=2)*a*a*a*a+2),easeInSine:function(a)return-1*Math.cos(a/1*(Math.PI/2))+1,easeOutSine:function(a)return 1*Math.sin(a/1*(Math.PI/2)),easeInOutSine:function(a)return-0.5*(Math.cos(Math.PI*a/1)-1),easeInExpo:function(a)return 0==a?1:1*Math.pow(2,10*(a/1-1)),easeOutExpo:function(a)return 1==
a?1:1*(-Math.pow(2,-10*a/1)+1),easeInOutExpo:function(a)return 0==a?0:1==a?1:1>(a/=0.5)?0.5*Math.pow(2,10*(a-1)):0.5*(-Math.pow(2,-10*--a)+2),easeInCirc:function(a)return 1<=a?a:-1*(Math.sqrt(1-(a/=1)*a)-1),easeOutCirc:function(a)return 1*Math.sqrt(1-(a=a/1-1)*a),easeInOutCirc:function(a)return 1>(a/=0.5)?-0.5*(Math.sqrt(1-a*a)-1):0.5*(Math.sqrt(1-(a-=2)*a)+1),easeInElastic:function(a)var c=1.70158,b=0,e=1;if(0==a)return 0;if(1==(a/=1))return 1;b||(b=0.3);e<Math.abs(1)?(e=1,c=b/4):c=b/(2*
Math.PI)*Math.asin(1/e);return-(e*Math.pow(2,10*(a-=1))*Math.sin((1*a-c)*2*Math.PI/b)),easeOutElastic:function(a)var c=1.70158,b=0,e=1;if(0==a)return 0;if(1==(a/=1))return 1;b||(b=0.3);e<Math.abs(1)?(e=1,c=b/4):c=b/(2*Math.PI)*Math.asin(1/e);return e*Math.pow(2,-10*a)*Math.sin((1*a-c)*2*Math.PI/b)+1,easeInOutElastic:function(a)var c=1.70158,b=0,e=1;if(0==a)return 0;if(2==(a/=0.5))return 1;b||(b=1*0.3*1.5);e<Math.abs(1)?(e=1,c=b/4):c=b/(2*Math.PI)*Math.asin(1/e);return 1>a?-0.5*e*Math.pow(2,10*
(a-=1))*Math.sin((1*a-c)*2*Math.PI/b):0.5*e*Math.pow(2,-10*(a-=1))*Math.sin((1*a-c)*2*Math.PI/b)+1,easeInBack:function(a)return 1*(a/=1)*a*(2.70158*a-1.70158),easeOutBack:function(a)return 1*((a=a/1-1)*a*(2.70158*a+1.70158)+1),easeInOutBack:function(a)var c=1.70158;return 1>(a/=0.5)?0.5*a*a*(((c*=1.525)+1)*a-c):0.5*((a-=2)*a*(((c*=1.525)+1)*a+c)+2),easeInBounce:function(a)return 1-B.easeOutBounce(1-a),easeOutBounce:function(a)return(a/=1)<1/2.75?1*7.5625*a*a:a<2/2.75?1*(7.5625*(a-=1.5/2.75)*
a+0.75):a<2.5/2.75?1*(7.5625*(a-=2.25/2.75)*a+0.9375):1*(7.5625*(a-=2.625/2.75)*a+0.984375),easeInOutBounce:function(a)return 0.5>a?0.5*B.easeInBounce(2*a):0.5*B.easeOutBounce(2*a-1)+0.5,q=s.canvas.width,u=s.canvas.height;window.devicePixelRatio&&(s.canvas.style.width=q+"px",s.canvas.style.height=u+"px",s.canvas.height=u*window.devicePixelRatio,s.canvas.width=q*window.devicePixelRatio,s.scale(window.devicePixelRatio,window.devicePixelRatio));this.PolarArea=function(a,c)r.PolarArea.defaults=scaleOverlay:!0,
scaleOverride:!1,scaleSteps:null,scaleStepWidth:null,scaleStartValue:null,scaleShowLine:!0,scaleLineColor:"rgba(0,0,0,.1)",scaleLineWidth:1,scaleShowLabels:!0,scaleLabel:"<%=value%>",scaleFontFamily:"'Arial'",scaleFontSize:12,scaleFontStyle:"normal",scaleFontColor:"#666",scaleShowLabelBackdrop:!0,scaleBackdropColor:"rgba(255,255,255,0.75)",scaleBackdropPaddingY:2,scaleBackdropPaddingX:2,segmentShowStroke:!0,segmentStrokeColor:"#fff",segmentStrokeWidth:2,animation:!0,animationSteps:100,animationEasing:"easeOutBounce",
animateRotate:!0,animateScale:!1,onAnimationComplete:null;var b=c?y(r.PolarArea.defaults,c):r.PolarArea.defaults;return new G(a,b,s);this.Radar=function(a,c)r.Radar.defaults=scaleOverlay:!1,scaleOverride:!1,scaleSteps:null,scaleStepWidth:null,scaleStartValue:null,scaleShowLine:!0,scaleLineColor:"rgba(0,0,0,.1)",scaleLineWidth:1,scaleShowLabels:!1,scaleLabel:"<%=value%>",scaleFontFamily:"'Arial'",scaleFontSize:12,scaleFontStyle:"normal",scaleFontColor:"#666",scaleShowLabelBackdrop:!0,scaleBackdropColor:"rgba(255,255,255,0.75)",
scaleBackdropPaddingY:2,scaleBackdropPaddingX:2,angleShowLineOut:!0,angleLineColor:"rgba(0,0,0,.1)",angleLineWidth:1,pointLabelFontFamily:"'Arial'",pointLabelFontStyle:"normal",pointLabelFontSize:12,pointLabelFontColor:"#666",pointDot:!0,pointDotRadius:3,pointDotStrokeWidth:1,datasetStroke:!0,datasetStrokeWidth:2,datasetFill:!0,animation:!0,animationSteps:60,animationEasing:"easeOutQuart",onAnimationComplete:null;var b=c?y(r.Radar.defaults,c):r.Radar.defaults;return new H(a,b,s);this.Pie=function(a,
c)r.Pie.defaults=segmentShowStroke:!0,segmentStrokeColor:"#fff",segmentStrokeWidth:2,animation:!0,animationSteps:100,animationEasing:"easeOutBounce",animateRotate:!0,animateScale:!1,onAnimationComplete:null;var b=c?y(r.Pie.defaults,c):r.Pie.defaults;return new I(a,b,s);this.Doughnut=function(a,c)r.Doughnut.defaults=segmentShowStroke:!0,segmentStrokeColor:"#fff",segmentStrokeWidth:2,percentageInnerCutout:50,animation:!0,animationSteps:100,animationEasing:"easeOutBounce",animateRotate:!0,animateScale:!1,
onAnimationComplete:null;var b=c?y(r.Doughnut.defaults,c):r.Doughnut.defaults;return new J(a,b,s);this.Line=function(a,c)r.Line.defaults=scaleOverlay:!1,scaleOverride:!1,scaleSteps:null,scaleStepWidth:null,scaleStartValue:null,scaleLineColor:"rgba(0,0,0,.1)",scaleLineWidth:1,scaleShowLabels:!0,scaleLabel:"<%=value%>",scaleFontFamily:"'Arial'",scaleFontSize:12,scaleFontStyle:"normal",scaleFontColor:"#666",scaleShowGridLines:!0,scaleGridLineColor:"rgba(0,0,0,.05)",scaleGridLineWidth:1,bezierCurve:!0,
pointDot:!0,pointDotRadius:4,pointDotStrokeWidth:2,datasetStroke:!0,datasetStrokeWidth:2,datasetFill:!0,animation:!0,animationSteps:60,animationEasing:"easeOutQuart",onAnimationComplete:null;var b=c?y(r.Line.defaults,c):r.Line.defaults;return new K(a,b,s);this.Bar=function(a,c)r.Bar.defaults=scaleOverlay:!1,scaleOverride:!1,scaleSteps:null,scaleStepWidth:null,scaleStartValue:null,scaleLineColor:"rgba(0,0,0,.1)",scaleLineWidth:1,scaleShowLabels:!0,scaleLabel:"<%=value%>",scaleFontFamily:"'Arial'",
scaleFontSize:12,scaleFontStyle:"normal",scaleFontColor:"#666",scaleShowGridLines:!0,scaleGridLineColor:"rgba(0,0,0,.05)",scaleGridLineWidth:1,barShowStroke:!0,barStrokeWidth:2,barValueSpacing:5,barDatasetSpacing:1,animation:!0,animationSteps:60,animationEasing:"easeOutQuart",onAnimationComplete:null;var b=c?y(r.Bar.defaults,c):r.Bar.defaults;return new L(a,b,s);var G=function(a,c,b)var e,h,f,d,g,k,j,l,m;g=Math.min.apply(Math,[q,u])/2;g-=Math.max.apply(Math,[0.5*c.scaleFontSize,0.5*c.scaleLineWidth]);
d=2*c.scaleFontSize;c.scaleShowLabelBackdrop&&(d+=2*c.scaleBackdropPaddingY,g-=1.5*c.scaleBackdropPaddingY);l=g;d=d?d:5;e=Number.MIN_VALUE;h=Number.MAX_VALUE;for(f=0;f<a.length;f++)a[f].value>e&&(e=a[f].value),a[f].value<h&&(h=a[f].value);f=Math.floor(l/(0.66*d));d=Math.floor(0.5*(l/d));m=c.scaleShowLabels?c.scaleLabel:null;c.scaleOverride?(j=steps:c.scaleSteps,stepValue:c.scaleStepWidth,graphMin:c.scaleStartValue,labels:[],z(m,j.labels,j.steps,c.scaleStartValue,c.scaleStepWidth)):j=C(l,f,d,e,h,
m);k=g/j.steps;x(c,function()for(var a=0;a<j.steps;a++)if(c.scaleShowLine&&(b.beginPath(),b.arc(q/2,u/2,k*(a+1),0,2*Math.PI,!0),b.strokeStyle=c.scaleLineColor,b.lineWidth=c.scaleLineWidth,b.stroke()),c.scaleShowLabels)b.textAlign="center";b.font=c.scaleFontStyle+" "+c.scaleFontSize+"px "+c.scaleFontFamily;var e=j.labels[a];if(c.scaleShowLabelBackdrop)var d=b.measureText(e).width;b.fillStyle=c.scaleBackdropColor;b.beginPath();b.rect(Math.round(q/2-d/2-c.scaleBackdropPaddingX),Math.round(u/2-k*(a+
1)-0.5*c.scaleFontSize-c.scaleBackdropPaddingY),Math.round(d+2*c.scaleBackdropPaddingX),Math.round(c.scaleFontSize+2*c.scaleBackdropPaddingY));b.fill()b.textBaseline="middle";b.fillStyle=c.scaleFontColor;b.fillText(e,q/2,u/2-k*(a+1)),function(e)var d=-Math.PI/2,g=2*Math.PI/a.length,f=1,h=1;c.animation&&(c.animateScale&&(f=e),c.animateRotate&&(h=e));for(e=0;e<a.length;e++)b.beginPath(),b.arc(q/2,u/2,f*v(a[e].value,j,k),d,d+h*g,!1),b.lineTo(q/2,u/2),b.closePath(),b.fillStyle=a[e].color,b.fill(),
c.segmentShowStroke&&(b.strokeStyle=c.segmentStrokeColor,b.lineWidth=c.segmentStrokeWidth,b.stroke()),d+=h*g,b),H=function(a,c,b)var e,h,f,d,g,k,j,l,m;a.labels||(a.labels=[]);g=Math.min.apply(Math,[q,u])/2;d=2*c.scaleFontSize;for(e=l=0;e<a.labels.length;e++)b.font=c.pointLabelFontStyle+" "+c.pointLabelFontSize+"px "+c.pointLabelFontFamily,h=b.measureText(a.labels[e]).width,h>l&&(l=h);g-=Math.max.apply(Math,[l,1.5*(c.pointLabelFontSize/2)]);g-=c.pointLabelFontSize;l=g=A(g,null,0);d=d?d:5;e=Number.MIN_VALUE;
h=Number.MAX_VALUE;for(f=0;f<a.datasets.length;f++)for(m=0;m<a.datasets[f].data.length;m++)a.datasets[f].data[m]>e&&(e=a.datasets[f].data[m]),a.datasets[f].data[m]<h&&(h=a.datasets[f].data[m]);f=Math.floor(l/(0.66*d));d=Math.floor(0.5*(l/d));m=c.scaleShowLabels?c.scaleLabel:null;c.scaleOverride?(j=steps:c.scaleSteps,stepValue:c.scaleStepWidth,graphMin:c.scaleStartValue,labels:[],z(m,j.labels,j.steps,c.scaleStartValue,c.scaleStepWidth)):j=C(l,f,d,e,h,m);k=g/j.steps;x(c,function()var e=2*Math.PI/
a.datasets[0].data.length;b.save();b.translate(q/2,u/2);if(c.angleShowLineOut)b.strokeStyle=c.angleLineColor;b.lineWidth=c.angleLineWidth;for(var d=0;d<a.datasets[0].data.length;d++)b.rotate(e),b.beginPath(),b.moveTo(0,0),b.lineTo(0,-g),b.stroke()for(d=0;d<j.steps;d++)b.beginPath();if(c.scaleShowLine)b.strokeStyle=c.scaleLineColor;b.lineWidth=c.scaleLineWidth;b.moveTo(0,-k*(d+1));for(var f=0;f<a.datasets[0].data.length;f++)b.rotate(e),b.lineTo(0,-k*(d+1));b.closePath();b.stroke()c.scaleShowLabels&&
(b.textAlign="center",b.font=c.scaleFontStyle+" "+c.scaleFontSize+"px "+c.scaleFontFamily,b.textBaseline="middle",c.scaleShowLabelBackdrop&&(f=b.measureText(j.labels[d]).width,b.fillStyle=c.scaleBackdropColor,b.beginPath(),b.rect(Math.round(-f/2-c.scaleBackdropPaddingX),Math.round(-k*(d+1)-0.5*c.scaleFontSize-c.scaleBackdropPaddingY),Math.round(f+2*c.scaleBackdropPaddingX),Math.round(c.scaleFontSize+2*c.scaleBackdropPaddingY)),b.fill()),b.fillStyle=c.scaleFontColor,b.fillText(j.labels[d],0,-k*(d+
1)))for(d=0;d<a.labels.length;d++)b.font=c.pointLabelFontStyle+" "+c.pointLabelFontSize+"px "+c.pointLabelFontFamily;b.fillStyle=c.pointLabelFontColor;var f=Math.sin(e*d)*(g+c.pointLabelFontSize),h=Math.cos(e*d)*(g+c.pointLabelFontSize);b.textAlign=e*d==Math.PI||0==e*d?"center":e*d>Math.PI?"right":"left";b.textBaseline="middle";b.fillText(a.labels[d],f,-h)b.restore(),function(d)var e=2*Math.PI/a.datasets[0].data.length;b.save();b.translate(q/2,u/2);for(var g=0;g<a.datasets.length;g++)b.beginPath();
b.moveTo(0,d*-1*v(a.datasets[g].data[0],j,k));for(var f=1;f<a.datasets[g].data.length;f++)b.rotate(e),b.lineTo(0,d*-1*v(a.datasets[g].data[f],j,k));b.closePath();b.fillStyle=a.datasets[g].fillColor;b.strokeStyle=a.datasets[g].strokeColor;b.lineWidth=c.datasetStrokeWidth;b.fill();b.stroke();if(c.pointDot)b.fillStyle=a.datasets[g].pointColor;b.strokeStyle=a.datasets[g].pointStrokeColor;b.lineWidth=c.pointDotStrokeWidth;for(f=0;f<a.datasets[g].data.length;f++)b.rotate(e),b.beginPath(),b.arc(0,d*-1*
v(a.datasets[g].data[f],j,k),c.pointDotRadius,2*Math.PI,!1),b.fill(),b.stroke()b.rotate(e)b.restore(),b),I=function(a,c,b)for(var e=0,h=Math.min.apply(Math,[u/2,q/2])-5,f=0;f<a.length;f++)e+=a[f].value;x(c,null,function(d)var g=-Math.PI/2,f=1,j=1;c.animation&&(c.animateScale&&(f=d),c.animateRotate&&(j=d));for(d=0;d<a.length;d++)var l=j*a[d].value/e*2*Math.PI;b.beginPath();b.arc(q/2,u/2,f*h,g,g+l);b.lineTo(q/2,u/2);b.closePath();b.fillStyle=a[d].color;b.fill();c.segmentShowStroke&&(b.lineWidth=
c.segmentStrokeWidth,b.strokeStyle=c.segmentStrokeColor,b.stroke());g+=l,b),J=function(a,c,b)for(var e=0,h=Math.min.apply(Math,[u/2,q/2])-5,f=h*(c.percentageInnerCutout/100),d=0;d<a.length;d++)e+=a[d].value;x(c,null,function(d)var k=-Math.PI/2,j=1,l=1;c.animation&&(c.animateScale&&(j=d),c.animateRotate&&(l=d));for(d=0;d<a.length;d++)var m=l*a[d].value/e*2*Math.PI;b.beginPath();b.arc(q/2,u/2,j*h,k,k+m,!1);b.arc(q/2,u/2,j*f,k+m,k,!0);b.closePath();b.fillStyle=a[d].color;b.fill();c.segmentShowStroke&&
(b.lineWidth=c.segmentStrokeWidth,b.strokeStyle=c.segmentStrokeColor,b.stroke());k+=m,b),K=function(a,c,b)var e,h,f,d,g,k,j,l,m,t,r,n,p,s=0;g=u;b.font=c.scaleFontStyle+" "+c.scaleFontSize+"px "+c.scaleFontFamily;t=1;for(d=0;d<a.labels.length;d++)e=b.measureText(a.labels[d]).width,t=e>t?e:t;q/a.labels.length<t?(s=45,q/a.labels.length<Math.cos(s)*t?(s=90,g-=t):g-=Math.sin(s)*t):g-=c.scaleFontSize;d=c.scaleFontSize;g=g-5-d;e=Number.MIN_VALUE;h=Number.MAX_VALUE;for(f=0;f<a.datasets.length;f++)for(l=
0;l<a.datasets[f].data.length;l++)a.datasets[f].data[l]>e&&(e=a.datasets[f].data[l]),a.datasets[f].data[l]<h&&(h=a.datasets[f].data[l]);f=Math.floor(g/(0.66*d));d=Math.floor(0.5*(g/d));l=c.scaleShowLabels?c.scaleLabel:"";c.scaleOverride?(j=steps:c.scaleSteps,stepValue:c.scaleStepWidth,graphMin:c.scaleStartValue,labels:[],z(l,j.labels,j.steps,c.scaleStartValue,c.scaleStepWidth)):j=C(g,f,d,e,h,l);k=Math.floor(g/j.steps);d=1;if(c.scaleShowLabels)b.font=c.scaleFontStyle+" "+c.scaleFontSize+"px "+c.scaleFontFamily;
for(e=0;e<j.labels.length;e++)h=b.measureText(j.labels[e]).width,d=h>d?h:d;d+=10r=q-d-t;m=Math.floor(r/(a.labels.length-1));n=q-t/2-r;p=g+c.scaleFontSize/2;x(c,function()b.lineWidth=c.scaleLineWidth;b.strokeStyle=c.scaleLineColor;b.beginPath();b.moveTo(q-t/2+5,p);b.lineTo(q-t/2-r-5,p);b.stroke();0<s?(b.save(),b.textAlign="right"):b.textAlign="center";b.fillStyle=c.scaleFontColor;for(var d=0;d<a.labels.length;d++)b.save(),0<s?(b.translate(n+d*m,p+c.scaleFontSize),b.rotate(-(s*(Math.PI/180))),b.fillText(a.labels[d],
0,0),b.restore()):b.fillText(a.labels[d],n+d*m,p+c.scaleFontSize+3),b.beginPath(),b.moveTo(n+d*m,p+3),c.scaleShowGridLines&&0<d?(b.lineWidth=c.scaleGridLineWidth,b.strokeStyle=c.scaleGridLineColor,b.lineTo(n+d*m,5)):b.lineTo(n+d*m,p+3),b.stroke();b.lineWidth=c.scaleLineWidth;b.strokeStyle=c.scaleLineColor;b.beginPath();b.moveTo(n,p+5);b.lineTo(n,5);b.stroke();b.textAlign="right";b.textBaseline="middle";for(d=0;d<j.steps;d++)b.beginPath(),b.moveTo(n-3,p-(d+1)*k),c.scaleShowGridLines?(b.lineWidth=c.scaleGridLineWidth,
b.strokeStyle=c.scaleGridLineColor,b.lineTo(n+r+5,p-(d+1)*k)):b.lineTo(n-0.5,p-(d+1)*k),b.stroke(),c.scaleShowLabels&&b.fillText(j.labels[d],n-8,p-(d+1)*k),function(d)function e(b,c)return p-d*v(a.datasets[b].data[c],j,k)for(var f=0;f<a.datasets.length;f++)b.strokeStyle=a.datasets[f].strokeColor;b.lineWidth=c.datasetStrokeWidth;b.beginPath();b.moveTo(n,p-d*v(a.datasets[f].data[0],j,k));for(var g=1;g<a.datasets[f].data.length;g++)c.bezierCurve?b.bezierCurveTo(n+m*(g-0.5),e(f,g-1),n+m*(g-0.5),
e(f,g),n+m*g,e(f,g)):b.lineTo(n+m*g,e(f,g));b.stroke();c.datasetFill?(b.lineTo(n+m*(a.datasets[f].data.length-1),p),b.lineTo(n,p),b.closePath(),b.fillStyle=a.datasets[f].fillColor,b.fill()):b.closePath();if(c.pointDot)b.fillStyle=a.datasets[f].pointColor;b.strokeStyle=a.datasets[f].pointStrokeColor;b.lineWidth=c.pointDotStrokeWidth;for(g=0;g<a.datasets[f].data.length;g++)b.beginPath(),b.arc(n+m*g,p-d*v(a.datasets[f].data[g],j,k),c.pointDotRadius,0,2*Math.PI,!0),b.fill(),b.stroke(),b),L=function(a,
c,b)var e,h,f,d,g,k,j,l,m,t,r,n,p,s,w=0;g=u;b.font=c.scaleFontStyle+" "+c.scaleFontSize+"px "+c.scaleFontFamily;t=1;for(d=0;d<a.labels.length;d++)e=b.measureText(a.labels[d]).width,t=e>t?e:t;q/a.labels.length<t?(w=45,q/a.labels.length<Math.cos(w)*t?(w=90,g-=t):g-=Math.sin(w)*t):g-=c.scaleFontSize;d=c.scaleFontSize;g=g-5-d;e=Number.MIN_VALUE;h=Number.MAX_VALUE;for(f=0;f<a.datasets.length;f++)for(l=0;l<a.datasets[f].data.length;l++)a.datasets[f].data[l]>e&&(e=a.datasets[f].data[l]),a.datasets[f].data[l]<
h&&(h=a.datasets[f].data[l]);f=Math.floor(g/(0.66*d));d=Math.floor(0.5*(g/d));l=c.scaleShowLabels?c.scaleLabel:"";c.scaleOverride?(j=steps:c.scaleSteps,stepValue:c.scaleStepWidth,graphMin:c.scaleStartValue,labels:[],z(l,j.labels,j.steps,c.scaleStartValue,c.scaleStepWidth)):j=C(g,f,d,e,h,l);k=Math.floor(g/j.steps);d=1;if(c.scaleShowLabels)b.font=c.scaleFontStyle+" "+c.scaleFontSize+"px "+c.scaleFontFamily;for(e=0;e<j.labels.length;e++)h=b.measureText(j.labels[e]).width,d=h>d?h:d;d+=10r=q-d-t;m=
Math.floor(r/a.labels.length);s=(m-2*c.scaleGridLineWidth-2*c.barValueSpacing-(c.barDatasetSpacing*a.datasets.length-1)-(c.barStrokeWidth/2*a.datasets.length-1))/a.datasets.length;n=q-t/2-r;p=g+c.scaleFontSize/2;x(c,function()b.lineWidth=c.scaleLineWidth;b.strokeStyle=c.scaleLineColor;b.beginPath();b.moveTo(q-t/2+5,p);b.lineTo(q-t/2-r-5,p);b.stroke();0<w?(b.save(),b.textAlign="right"):b.textAlign="center";b.fillStyle=c.scaleFontColor;for(var d=0;d<a.labels.length;d++)b.save(),0<w?(b.translate(n+
d*m,p+c.scaleFontSize),b.rotate(-(w*(Math.PI/180))),b.fillText(a.labels[d],0,0),b.restore()):b.fillText(a.labels[d],n+d*m+m/2,p+c.scaleFontSize+3),b.beginPath(),b.moveTo(n+(d+1)*m,p+3),b.lineWidth=c.scaleGridLineWidth,b.strokeStyle=c.scaleGridLineColor,b.lineTo(n+(d+1)*m,5),b.stroke();b.lineWidth=c.scaleLineWidth;b.strokeStyle=c.scaleLineColor;b.beginPath();b.moveTo(n,p+5);b.lineTo(n,5);b.stroke();b.textAlign="right";b.textBaseline="middle";for(d=0;d<j.steps;d++)b.beginPath(),b.moveTo(n-3,p-(d+1)*
k),c.scaleShowGridLines?(b.lineWidth=c.scaleGridLineWidth,b.strokeStyle=c.scaleGridLineColor,b.lineTo(n+r+5,p-(d+1)*k)):b.lineTo(n-0.5,p-(d+1)*k),b.stroke(),c.scaleShowLabels&&b.fillText(j.labels[d],n-8,p-(d+1)*k),function(d)b.lineWidth=c.barStrokeWidth;for(var e=0;e<a.datasets.length;e++)b.fillStyle=a.datasets[e].fillColor;b.strokeStyle=a.datasets[e].strokeColor;for(var f=0;f<a.datasets[e].data.length;f++)var g=n+c.barValueSpacing+m*f+s*e+c.barDatasetSpacing*e+c.barStrokeWidth*e;b.beginPath();
b.moveTo(g,p);b.lineTo(g,p-d*v(a.datasets[e].data[f],j,k)+c.barStrokeWidth/2);b.lineTo(g+s,p-d*v(a.datasets[e].data[f],j,k)+c.barStrokeWidth/2);b.lineTo(g+s,p);c.barShowStroke&&b.stroke();b.closePath();b.fill(),b),D=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a)window.setTimeout(a,1E3/60),F=;

HTML

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <body>
        <h1>Live Updating Chart.js</h1>

        <canvas id="myChart"  ></canvas>


    </body>
</html>

【讨论】:

自 2014 年 7 月 26 日起,支持实时更新。 github.com/nnnick/Chart.js/issues/13#issuecomment-50232100 Chartjs 2.x.x 不支持 Chart(ctx).Line。我已经用最新的 Chartjs 2.2 jsbin.com/gahoma/edit?html,js,output 更新了这个例子 来自@doub1ejack 的错误答案,示例提供使用 v1 而不是 v2 如何绘制不同长度和不同标签的数据集并循环遍历数据集?图表保留了起始数据中的标签,并且在缺少某些标签时无法正确显示codepen.io/kannaiah/pen/NOXpoL 在每一个答案中,我看到每个人都在全球范围内使用图表对象。没有其他方法可以检索此对象吗?我有很多图表,因此在全球范围内分配它们是一个问题。【参考方案2】:

update() 触发图表更新。 chart.update()

.update(config)

触发图表的更新。这可以在更新数据对象后安全地调用。这将更新所有比例、图例,然后重新渲染图表。可以为config 对象提供additional configuration 用于更新过程。

update() 可以在更新数据对象中一个或多个现有点的值后安全地调用,在一个动画渲染循环中渲染更改。

// update the first dataset's value of 'March' to be 50
myBarChart.data.datasets[0].bars[2].value = 50;

// animate update of 'March' from 90 to 50.
myBarChart.update();

【讨论】:

这个问题是,创建图表和更新图表需要两种不同形式的数据。【参考方案3】:

这是在最新版本的 ChartJs 中的操作方法:

setInterval(function()
    chart.data.datasets[0].data[5] = 80;
    chart.data.labels[5] = "Newly Added";
    chart.update();

看看这个clear video

或在jsfiddle中测试它

【讨论】:

这是正确答案,可能应该这样标记。 chart.update() 从 OP 想要的点的先前位置开始动画。 我的问题是我的图表在一个函数中,所以我用 globalThis 定义了该图表并做到了【参考方案4】:

您也可以使用 destroy() 函数。像这样

 if( window.myBar!==undefined)
     window.myBar.destroy();
 var ctx = document.getElementById("canvas").getContext("2d");
 window.myBar = new Chart(ctx).Bar(barChartData, 
     responsive : true,
 );

【讨论】:

我的 chartjs 版本不支持其他答案提出的任何更新方法。所以我想我会用这个。谢谢。【参考方案5】:

您只需要更改chartObject.data.datasets 的值并像这样调用update()

chartObject.data.datasets = newData.datasets;
chartObject.data.labels = newData.labels;
chartObject.update();

【讨论】:

请不要发布仅代码的答案。解释您的代码并添加参考。【参考方案6】:

移除canvas dom并重新添加。

function renderChart(label,data)

    $("#canvas-wrapper").html("").html('<canvas id="storeSends"></canvas>');
    var lineChartData = 
        labels : label,
        datasets : [
            
                fillColor : "rgba(49, 195, 166, 0.2)",
                strokeColor : "rgba(49, 195, 166, 1)",
                pointColor : "rgba(49, 195, 166, 1)",
                pointStrokeColor : "#fff",
                data : data
            
        ]

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

    myLine = new Chart(ctx).Line(lineChartData, 
        responsive: true,
        maintainAspectRatio: false
    );

【讨论】:

尽管引入了新函数来更新数据,但我仍然更喜欢这种方式,因为即使我使用“myLine.update()”函数,嵌入式函数也不会直接使用“lineChartData”更新图表。 @Yu Tian如何传递数据值?【参考方案7】:

如果 destroy() 和 clear() 不起作用(就像我的经验一样),您可以使用 jquery 删除画布并再次附加它。

    $('#chartAmazon').remove();
    $('#chartBar').append('<canvas id="chartAmazon"></canvas>');

    var ctxAmazon = $("#chartAmazon").get(0).getContext("2d");
      var AmazonChart = new Chart(ctxAmazon, 
        type: 'doughnut',
        data: dataAmazon,
        options: optionsA
    );

【讨论】:

【参考方案8】:

我认为最简单的方法是编写一个函数来更新您的图表,包括chart.update()method。查看我在 jsfiddle 中为条形图编写的 this 简单示例。

//value for x-axis
var emotions = ["calm", "happy", "angry", "disgust"];

//colours for each bar
var colouarray = ['red', 'green', 'yellow', 'blue'];

//Let's initialData[] be the initial data set
var initialData = [0.1, 0.4, 0.3, 0.6];

//Let's updatedDataSet[] be the array to hold the upadted data set with every update call
var updatedDataSet;

/*Creating the bar chart*/
var ctx = document.getElementById("barChart");
var barChart = new Chart(ctx, 
  type: 'bar',
  data: 
    labels: emotions,
    datasets: [
      backgroundColor: colouarray,
      label: 'Prediction',
      data: initialData
    ]
  ,
  options: 
    scales: 
      yAxes: [
        ticks: 
          beginAtZero: true,
          min: 0,
          max: 1,
          stepSize: 0.5,
        
      ]
    
  
);

/*Function to update the bar chart*/
function updateBarGraph(chart, label, color, data) 
  chart.data.datasets.pop();
  chart.data.datasets.push(
    label: label,
    backgroundColor: color,
    data: data
  );
  chart.update();


/*Updating the bar chart with updated data in every second. */
setInterval(function() 
  updatedDataSet = [Math.random(), Math.random(), Math.random(), Math.random()];
  updateBarGraph(barChart, 'Prediction', colouarray, updatedDataSet);
, 1000);
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>

<body>
    <div>
      <h1>Update Bar Chart</h1>
      <canvas id="barChart"  ></canvas>
    </div>
    <script src="barchart.js"></script>
  </body>
  
</head>

</html>

希望这会有所帮助。

【讨论】:

【参考方案9】:

我认为现在不可能。

但是,正如作者在这里暗示的那样,这是一个很快就会出现的功能: https://github.com/nnnick/Chart.js/issues/161#issuecomment-20487775

【讨论】:

【参考方案10】:

至少有两种解决方法:

1) chart.update()

2) 使用 chart.destroy() 删除现有图表并创建新图表对象。

【讨论】:

chart.destroy() 帮助了我!谢谢!【参考方案11】:

这是 ChartJs - 2.9.4

的示例

var maximumPoints = 5;// with this variable you can decide how many points are display on the chart
        function addData(chart, label, data) 
            chart.data.labels.push(label);
            chart.data.datasets.forEach((dataset) => 
                var d = data[0];
                dataset.data.push(d);
                data.shift();
            );


            var canRemoveData = false;
            chart.data.datasets.forEach((dataset) => 
                if (dataset.data.length > maximumPoints) 

                    if (!canRemoveData) 
                        canRemoveData = true;
                        chart.data.labels.shift();
                    

                    dataset.data.shift();

                

            );



            chart.update();
        




        window.onload = function () 
            var canvas = document.getElementById('elm-chart'),
                ctx = canvas.getContext('2d');

            var myLineChart = new Chart(ctx, 
                type: 'line',
                data: 
                    labels: [],
                    datasets: [
                        
                            data: [],
                            label: 'Dataset-1',
                            backgroundColor: "#36a2eb88",
                            borderColor: "#36a2eb",
                        ,
                        
                            data: [],
                            label: 'Dataset-2',
                            backgroundColor: "#ff638488",
                            borderColor: "#ff6384",
                        
                    ],

                ,
                options: 
                    responsive: false,
                    maintainAspectRatio: false,
                    scales: 
                        yAxes: [
                            ticks: 
                                beginAtZero: true
                            
                        ]
                    
                
            );

            var index = 0;
            setInterval(function () 

                var data = [];
                myLineChart.data.datasets.forEach((dataset) => 
                    data.push(Math.random() * 100);
                );

                addData(myLineChart, index, data);
                index++;

            , 1000);
        
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="elm-chart"  ></canvas>

【讨论】:

【参考方案12】:

最简单的方法是替换canvas元素,然后再次调用new Chart():

function reloadMyChart() 
    $('myChart').replaceWith('<canvas id="myChart"></canvas>');
    new Chart(document.getElementById("myChart"), 
        data: yourChartData,
        type: yourChartType,
        options: yourChartOptions
    );

当然,您必须将 yourChartData、yourChartType 和 yourChartOptions 替换为初始化 Chart.js 所需的正确值。见Chart.js Docs。

您可以在按钮单击或您需要的任何其他事件上调用 reloadMyChart 函数。您可能会向该函数添加参数并使用这些参数进行 REST 调用以动态更新图表,如下所示:

function reloadMyChart(param1, param2) 
    $('myChart').replaceWith('<canvas id="myChart"></canvas>');
    $.get("restUrl?param1=" + param1 + "&param2=" + param2 + ",
        function(data) 
            // call new Chart() here and use returned data
        
    );

希望对您有所帮助! =)

【讨论】:

【参考方案13】:

Showing realtime update chartJS

function add_data(chart, label, data) 
      
        var today = new Date();
        var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
        myLineChart.data.datasets[0].data.push(Math.random() * 100);
        myLineChart.data.datasets[1].data.push(Math.random() * 100);
        myLineChart.data.labels.push(time)
        myLineChart.update();
      
      setInterval(add_data, 10000); //milisecond

完整代码,可在说明链接中下载

【讨论】:

【参考方案14】:

您可以使用Chart.instances 检查Chart 的实例。 这将为您提供所有图表实例。 现在您可以迭代该实例并更改 config.xml 中存在的数据。 假设您的页面中只有一个图表。

for (var _chartjsindex in Chart.instances) 
/* 
 * Here in the config your actual data and options which you have given at the 
   time of creating chart so no need for changing option only you can change data
*/
 Chart.instances[_chartjsindex].config.data = [];
 // here you can give add your data
 Chart.instances[_chartjsindex].update();
 // update will rewrite your whole chart with new value
 

【讨论】:

【参考方案15】:

如此简单,只需替换图表画布元素即可。

$('#canvas').replaceWith('id="canvas" >');

【讨论】:

以上是关于动态更新chartjs图表的值的主要内容,如果未能解决你的问题,请参考以下文章

Chartjs:更新数据后常见的可点击图例不起作用

使用 nodejs 和 chartjs 从 mongodb 插入和获取值

Chart js 更新多个图表

如何通过Websocket的数据动态更新Ngx图表的条形图

如何在动态更新的图表上更新高价指标

Angular 4 - 为 Facebook 动态更新 Meta 标签(打开图表)