Question

我有以下代码来绘制圆环图，它与静态数据集一样完美。（这是静态图表：http://jsfiddle.net/2gapedks/71/）我正在使用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会中断并且chromes检查器会出现以下错误：

未捕获的TypeError：无法读取属性＆＃39; url＆＃39;未定义的

这是以下一行：

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

chart.js addData中断函数v1.0.2

1 个答案: