chart.js addData breaks関数v1.0.2

Question

私はドーナツチャートを描画する次のコードを持っています。静的なデータセットと同様に機能します。私はsocket.ioを使用しています。特定の条件でチャートを更新するためにaddData関数をテストしています。現在、テスト用にaddDataも静的にしています。

データを追加してください：

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

私は、データを追加するとき、drawSegmentValuesブレークやクローム検査官が次のエラーを思い付くことに気づいた：

Uncaught TypeError: Cannot read property 'url' of undefined

次の行です：機能が破損する原因とすることができるもの

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

？

Answer 1

addData関数がどのように機能しているか誤解しました。

私のdrawSegmentValuesは、chart.js自体で使用される配列ではなく、外部配列を使用します。

addDataがmyChart.segmentsの長さを増やした場合、データ配列は増加せず、mychart.segments max indexのデータにインデックスがありませんでした。

データの追加を変更してarray.pushを追加し、両方の配列が更新されて整列された状態に保たれました。

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"});