chart.js addData breakks işlevi v1.0.2

Question

Donut grafik çizmek için aşağıdaki kodu kullanıyorum ve statik veri kümesinde olduğu gibi mükemmel çalışıyor. (Burada statik grafik: http://jsfiddle.net/2gapedks/71/) Ben socket.io kullanıyorum ve şu anda addData statik tutmak için test için belirli bir koşulda grafik güncellemek için addData fonksiyonunu test ediyorum:

Veri ekle:

verileri eklediğinizde, drawSegmentValues ​​sonları ve kromlar denetçisi aşağıdaki hata ile çıkageldi o

myChart.addData({value: 2000, color:"#F7464A", url:"http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/cc/cc4cafa5e36c3333ffece4a19debe52ff693e4ab_full.jpg"}); 

ChartJS

var data = [ 
    {value: 500, color:"#F7464A", url:"https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/d8/d85a3b326846fa2b0f6e59acdbaa0cfef307bd87_full.jpg"}, 
    {value: 500, color:"#F7464A", url:"http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/c3/c342f1e1590c5adb1040b3f8fedfebd060b1b839_full.jpg"} 
    ]; 
var total = 0; 

var options = { 
    segmentShowStroke : true, 
    segmentStrokeColor : "#fff", 
    segmentStrokeWidth : 2, 
    percentageInnerCutout : 30, // This is 0 for Pie charts 
    animationSteps : 100, 
    animationEasing : "easeOutBounce", 
    animateRotate : true, 
    animateScale : false, 
    legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>", 
    showTooltips: false, 
    onAnimationProgress: drawSegmentValues, 
    onAnimationComplete: drawTotalValues 
} 

var canvas = document.getElementById("wheel"); 
var ctx = canvas.getContext("2d"); 
var midX = canvas.width/2; 
var midY = canvas.height/2; 

// Create a pie chart 
var myChart = new Chart(ctx).Doughnut(data, options); 

var radius = myChart.outerRadius; 

function drawSegmentValues() 
{ 
    for(var i=0; i<myChart.segments.length; i++) 
    { 
     var image = new Image(); 
     image.src = data[i].url; 

     ctx.fillStyle="white"; 
     var textSize = canvas.width/30; 
     ctx.font= textSize+"px Verdana"; 

     var value = myChart.segments[i].value; 
     var startAngle = myChart.segments[i].startAngle; 
     var endAngle = myChart.segments[i].endAngle; 
     var middleAngle = startAngle + ((endAngle - startAngle)/2); 

     if (data[i].value > 100) { 
      var posX = (3*radius)/4.5 * Math.cos(middleAngle) + midX; 
      var posY = (3*radius)/4.5 * Math.sin(middleAngle) + midY; 
     } 
     else { 
      var posX = (3*radius)/4.5 * Math.cos(middleAngle) + midX; 
      var posY = (3*radius)/4.5 * Math.sin(middleAngle) + midY; 
     } 

     // Text offside by middle 
     var w_offset = 32; 
     var h_offset = 32; 

     ctx.drawImage(image, posX - w_offset, posY - h_offset, 64, 64); 
    } 
} 
function drawTotalValues() 
{ 
    console.log("I am Here drawing"); 
    for(var i=0; i<myChart.segments.length; i++) 
    { 
      total += myChart.segments[i].value; 
    } 
    ctx.fillStyle="black"; 
    var textSize = canvas.width/30; 
    ctx.font= textSize+"px Verdana"; 

    // Text offside by middle 
    var w_offset = ctx.measureText(total+"\ud83c\udf53").width/2; 
    var h_offset = textSize/4; 

    ctx.fillText(total+"\ud83c\udf53", midX - w_offset, midY + h_offset); 
} 

Ben fark etmiş:

Uncaught TypeError: Cannot read property 'url' of undefined

aşağıdaki satırı olan:

function drawSegmentValues() 
{ 
    for(var i=0; i<myChart.segments.length; i++) 
    { 
     var image = new Image(); 
     image.src = data[i].url; // Here 

işlevi kırmak için ne sebep olabilir?

Answer 1

addData işlevinin nasıl çalıştığını yanlış anladım.

Benim drawSegmentValues, chart.js tarafından kullanılan bir dizi yerine bir dış dizi kullanır.

addData myChart.segments uzunluğunu artırdığında, veri dizisi artmadı ve bu nedenle mychart.segments max dizinindeki verilerde dizin yoktu.

Her iki dizinin güncelleştirildiği ve hizalandığı şekilde bir array.push içerecek şekilde veri eklememi değiştirdim.

Data.push({value: 500, color:"#F7464A", url:"https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/d8/d85a3b326846fa2b0f6e59acdbaa0cfef307bd87_full.jpg"}); 
myChart.addData({value: 500, color:"#F7464A", url:"https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/d8/d85a3b326846fa2b0f6e59acdbaa0cfef307bd87_full.jpg"});