le code fonctionne bien sur jsfiddle mais une fonction ne fonctionne pas sur le site web

Question

J'ai copié le code de fiddle exactement, j'ai inclus les ressources externes correctes, les bibliothèques etc. etc. mais une fonction ne veut pas fonctionner. Mais une fonction ne veut pas fonctionner. J'ai inclus un fichier console.log et cette fonction n'est pas du tout atteinte alors qu'elle fonctionne bien dans fiddle.

Note : tout le reste fonctionne comme prévu.

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

Quel pourrait être le problème ?

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

EDITS //

Code du violon :

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

Code du site web index - en-tête :

<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 - en bas de la page :

<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

Dans votre jsFiddle, vous chargez une seule instance de Chart.js (cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js) et en bas de l'index de votre site web, il me semble que vous chargez une autre instance de Chart.js. La version locale pourrait être différente de la version utilisée dans le jsFiddle (1.0.2).