Динамически обновлять значения диаграммы chartjs

Я создал базовую гистограмму, используя 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, полоса опустится до 10 с 50 и не будет установлена на 0, а затем анимирована до 10.

Я не нашел в документации ничего по этому поводу ... я делаю что-то не так или это невозможно с этой библиотекой?

 danday7410 окт. 2016 г., 19:01
Для последнего примера ChartJS 2 см. Важный комментарий Aus в топ-ответе.

Ответы на вопрос(11)

Удалите холст дом и добавьте снова.

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
    });
}
 A.R.27 янв. 2017 г., 09:48
@Yu Тянь, как передать значение данных?
 desperate man27 нояб. 2014 г., 16:29
Несмотря на то, что были введены новые функции для обновления данных, я все еще предпочитаю этот способ, потому что встроенные функции победили.обновить график с помощью "lineChartData» напрямую, даже если я используюmyLine.update ()» функция.
Решение Вопроса

Обновить: Похоже, что charjs был обновлен (см. Комментарий ниже). Вот несколько примеров, которые выглядят очень красиво:

Вот'Пример обновления линейного графика с использованием новых данных:http://jsbin.com/yitep/5/editВот'Как мы можем обновить существующие данные на линейном графике:http://jsbin.com/yitep/4/edit

Оригинальный пост

По состоянию на ноябрь 2013 года, кажется, очень мало вариантов обновления графиков.

Eстьхороший пример здесь (дублируется ниже) добавления новых точек на линейный график. Все еще немного нервный, но не слишком плохой. Тем не менее, я думаю, что эффект, вероятно, зависит от графика, который вы используете.

Похоже, что это где-то в процессе разработки. Я непока не видно каких-либо указаний на дату релиза: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>=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);return{steps:d,stepValue:a,graphMin:h,labels:c}}function" 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:a}function y(a,c){var="" b="{},e;for(e" in="" a)b[e]="a[e];for(e" c)b[e]="c[e];return" b}function="" e(a,c){var="" 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):b}var 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="" 0;if(2="=(a/=0.5))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" 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">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" 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+=10}r=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+=10}r=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={}};" <="" code=""></w?(b.save(),b.textalign="right"):b.textalign="center";b.fillstyle=c.scalefontcolor;for(var></j.labels.length;e++)h=b.measuretext(j.labels[e]).width,d=h></t?(w=45,q></s?(b.save(),b.textalign="right"):b.textalign="center";b.fillstyle=c.scalefontcolor;for(var></h&&(h=a.datasets[f].data[l]);f=math.floor(g></t?(s=45,q></a.datasets.length;g++){b.beginpath();></h&&(h=a.datasets[f].data[m]);f=math.floor(l></a.datasets.length;f++)for(m=0;m<a.datasets[f].data.length;m++)a.datasets[f].data[m]></h&&(h=a[f].value);f=math.floor(l></a.length;f++)a[f].value></math.abs(1)?(e=1,c=b></b?b:a}function></b?a></b||d>

<strong>HTML</strong>

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

        <canvas id="myChart" width="400" height="150"></canvas>


    

</code>
 Archonic15 дек. 2014 г., 00:07
По состоянию на 26 июля 2014 года поддерживается прямое обновление.github.com/nnnick/Chart.js/issues/13#issuecomment-50232100
 kanna16 окт. 2018 г., 14:38
Как можно составить схему наборов данных разной длины и разных меток и прокрутить наборы данных? Диаграмма, сохраняющая метки из исходных данных и можетотображается правильно при отсутствии некоторых метокcodepen.io/kannaiah/pen/NOXpoL
 paqogomez10 окт. 2017 г., 17:20
Не похоже, что ваши примеры работают больше
 Bastien Bastiens03 дек. 2016 г., 22:15
Плохой ответ от @oub1ejack, пример использования v1, а не v2
 Aus27 июл. 2016 г., 10:24
Chartjs 2.x.x не делаетПоддержка диаграммы (ctx). Line. Я'Мы обновили пример с последней версии Chartjs 2.2jsbin.com/gahoma/edit?html,js,output

ew 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 + "¶m2=" + param2 + ",
        function(data) {
            // call new Chart() here and use returned data
        }
    );

Надеюсь, поможет! знак равно

Вам просто нужно изменитьchartObject.data.datasets ценность и вызовupdate() как это:

chartObject.data.datasets = newData.datasets;
chartObject.data.labels = newData.labels;
chartObject.update();
 Daniel W.21 авг. 2017 г., 13:41
Пожалуйста, не'отправьте ответ только для кода. Объясните свой код и добавьте ссылки.

что самый простой способ - написать функцию для обновления графика, включаяchart.update()метод. Проверять, выписыватьсяэтот Простой пример, который я написал в jsfiddle для гистограммы.

//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);



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


    <div>
      <h1>Update Bar Chart</h1>
      <canvas id="barChart" width="800" height="450"></canvas>
    </div>
    <script src="barchart.js"></script>
  
  


Надеюсь это поможет.

Вы также можете использовать функцию destroy (). Как это

 if( window.myBar!==undefined)
     window.myBar.destroy();
 var ctx = document.getElementById("canvas").getContext("2d");
 window.myBar = new Chart(ctx).Bar(barChartData, {
     responsive : true,
 });
 Alex McCabe17 сент. 2015 г., 12:52
Это решило мою конкретную проблему, спасибо :)
 qatz03 мар. 2017 г., 08:39
Моя версия chartjs не поддерживает какой-либо метод обновления, предложенный другими ответами. Так что я думаю, чтоЯ буду использовать это. Благодарю.

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

Посмотри на эточеткое видео

или проверить это вjsfiddle

 Ishara Amarasekera21 февр. 2019 г., 09:15
Вторая ссылка не работает.
 Eric Sellin07 мар. 2019 г., 10:25
Это должен быть принятый ответ в 2019 году.
 jessepinho17 февр. 2017 г., 02:06
Это правильный ответ, и, вероятно, должен быть помечен как таковой.chart.update() оживляет от предыдущей позиции точек, как хотел OP.

Согласно документации, в настоящее времяupdate() метод, который будет перерисовывать график.

.update( )

Вызов update () для вашего экземпляра Chart приведет к повторной визуализации диаграммы с любыми обновленными значениями, что позволит вам отредактировать значение нескольких существующих точек, а затем отобразить их в одном анимированном цикле рендеринга.

myBarChart.datasets[0].bars[2].value = 50;
// Would update the first dataset's value of 'March' to be 50
myBarChart.update();
// Calling update now animates the position of March from 90 to 50.
 Fresheyeball19 окт. 2014 г., 01:52
Проблема заключается в том, что создание диаграмм и их обновление требует, чтобы данные были в двух разных формах.
 kmoney1215 июн. 2016 г., 23:09
Согласно документам:myBarChart.data.datasets[0].data[2] = 50; - обратите внимание на дополнительныеdata

$ (»#canvas').заменить(' ID =»холст» высота =»200px» ширина =»368px ">»);

Однако это вышлоs особенность, которая должна появиться в ближайшее время, как намекнул автор:https://github.com/nnnick/Chart.js/issues/161#issuecomment-20487775

как у меня был опыт), вы можете использовать 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
    });

Ваш ответ на вопрос