代码在jsfiddle上正常工作但是一个函数在网站上不起作用

Question

我已经完全复制了来自小提琴的代码，包括正确的外部资源，库等等，但是一个函数并不想工作。我已经包含了一个console.log，而这个功能根本就没有达到，但是在小提琴中它工作正常。

注意：其他一切都按预期工作。

http://jsfiddle.net/2gapedks/68/

可能是什么问题？

function drawSegmentValues()
    {
        console.log("I am Here Animating");
        for(var i=0; i<myChart.segments.length; i++) 
        {
            ctx.fillStyle="white";
            var textSize = canvas.width/30;
            ctx.font= textSize+"px Verdana";
            // Get needed variables
            var value = myChart.segments[i].value;
            var startAngle = myChart.segments[i].startAngle;
            var endAngle = myChart.segments[i].endAngle;
            var middleAngle = startAngle + ((endAngle - startAngle)/2);

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

            // Text offside by middle
            var w_offset = ctx.measureText(value).width/2;
            var h_offset = textSize/4;

            ctx.fillText(value, posX - w_offset, posY + h_offset);
        }
    }

编辑//

小提琴代码：

var data = [
    {value: 500, color:"#F7464A", label:"Test1"},
    {value: 500, color:"#F7464A", label:"<a href='#'>Test2</a>"}
    ];
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()
{
    console.log("I am Here Animating");
    for(var i=0; i<myChart.segments.length; i++) 
    {
        ctx.fillStyle="white";
        var textSize = canvas.width/30;
        ctx.font= textSize+"px Verdana";
        // Get needed variables
        var value = myChart.segments[i].value;
        var startAngle = myChart.segments[i].startAngle;
        var endAngle = myChart.segments[i].endAngle;
        var middleAngle = startAngle + ((endAngle - startAngle)/2);

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

        // Text offside by middle
        var w_offset = ctx.measureText(value).width/2;
        var h_offset = textSize/4;

        ctx.fillText(value, posX - w_offset, posY + h_offset);
    }
}
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);
}

网站代码 index - header：

<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

index - 位于页面底部：

<script src="js/Chart.js"></script>
<script src="socket.js"></script>

socket.io：

var data = [
    {value: 500, color:"#F7464A", label:"Test1"},
    {value: 500, color:"#F7464A", label:"<a href='#'>Test2</a>"}
    ];
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()
{
    console.log("I am Here Animating");
    for(var i=0; i<myChart.segments.length; i++) 
    {
        ctx.fillStyle="white";
        var textSize = canvas.width/30;
        ctx.font= textSize+"px Verdana";
        // Get needed variables
        var value = myChart.segments[i].value;
        var startAngle = myChart.segments[i].startAngle;
        var endAngle = myChart.segments[i].endAngle;
        var middleAngle = startAngle + ((endAngle - startAngle)/2);

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

        // Text offside by middle
        var w_offset = ctx.measureText(value).width/2;
        var h_offset = textSize/4;

        ctx.fillText(value, posX - w_offset, posY + h_offset);
    }
}
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);
}

Answer 1

在你的jsFiddle中你只加载一个Chart.js实例（cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js）并在你网站的索引底部在我看来，你正在加载另一个Chart.js实例。本地版本可能与jsFiddle（1.0.2）中使用的版本不同。