代码在 jsfiddle 上运行良好，但有一个功能在网站上不起作用

Question

我已经完全复制了 fiddle 中的代码，包括正确的外部资源、库等，但是有一个功能无法运行。我已经包含了一个 console.log 并且这个功能根本没有被实现但是在 fiddle 中它工作正常。

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

可能是什么问题？

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

编辑//

Fiddle代码：

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

网站代码索引 - 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) 中使用的版本不同。

代码在 jsfiddle 上运行良好，但有一个功能在网站上不起作用

code works fine on jsfiddle but one function is not working on website

javascript

jquery

jsfiddle

chart.js