Javascript 代码在JSFIDLE上运行良好，但有一个函数在网站上不起作用_Javascript_Jquery_Jsfiddle_Chart.js

Javascript 代码在JSFIDLE上运行良好，但有一个函数在网站上不起作用

javascript jquery chart.js

Javascript 代码在JSFIDLE上运行良好，但有一个函数在网站上不起作用,javascript,jquery,jsfiddle,chart.js,Javascript,Jquery,Jsfiddle,Chart.js,我从fiddle复制了代码，包括正确的外部资源、库等，但是有一个函数不想工作。我已经包括了一个console.log，这个函数根本没有被访问，但是在fiddle中它工作得很好注意：其他一切都按预期进行有什么问题吗 function drawSegmentValues() { console.log("I am Here Animating"); for(var i=0; i<myChart.segments.length; i++)

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

函数drawSegmentValues（）
{
log（“我在这里制作动画”）；
对于（变量i=0；i 100）{
变量posX=（3*半径）/5*数学cos（中夹角）+midX；
变量posY=（3*半径）/5*数学sin（中间角）+midY；
}
否则{
变量posX=（3*半径）/5*数学cos（中夹角）+midX；
变量posY=（3*半径）/5*数学sin（中间角）+midY；
}
//文本由中间越位
变量w_offset=ctx.measureText（值）.width/2；
var h_offset=textSize/4；
填充文本（值，posX-w_偏移，posY+h_偏移）；
}
}

编辑//

小提琴代码：

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

var数据=[
{值：500，颜色：#F7464A，标签：“Test1”}，
{值：500，颜色：#F7464A，标签：}
];
var合计=0；
变量选项={
这是真的，
segmentStrokeColor:#fff“，
分段行程宽度：2，
percentageInnerCutout:30，//对于饼图，这是0
动画步骤：100，
动画化：“easeOutBounce”，
动画片：对，
动画缩放：错误，
legendTemplate:“”，
showTooltips:false，
onAnimationProgress:DrawSegmentValue，
onAnimationComplete:drawTotalValues
}
var canvas=document.getElementById（“轮子”）；
var ctx=canvas.getContext（“2d”）；
var midX=canvas.width/2；
var midY=canvas.height/2
//创建饼图
var myChart=新图表（ctx）.Doughnut（数据，选项）；
var半径=myChart.outerRadius；
函数值（）
{
log（“我在这里制作动画”）；
对于（变量i=0；i 100）{
变量posX=（3*半径）/5*数学cos（中夹角）+midX；
变量posY=（3*半径）/5*数学sin（中间角）+midY；
}
否则{
变量posX=（3*半径）/5*数学cos（中夹角）+midX；
变量posY=（3*半径）/5*数学sin（中间角）+midY；
}
//文本由中间越位
变量w_offset=ctx.measureText（值）.width/2；
var h_offset=textSize/4；
填充文本（值，posX-w_偏移，posY+h_偏移）；
}
}
函数drawTotalValues（）
{
console.log（“我在这里画画”）；
例如（var i=0；i在您的JSFIDLE中，您只加载了Chart.js的一个实例（cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js），在您网站的索引底部，我觉得您正在加载Chart.js的另一个实例。本地版本可能与jsFiddle中使用的版本（1.0.2）不同.您的代码中出现了什么错误？任何错误？@JordanHendrix没有错误或任何错误，该函数只是没有被访问/调用任何东西，即使它清楚地存在于fiddle和我的网站代码的选项数组中。您能向我们展示其余的代码吗？您在哪里调用该函数？您的代码在文档中吗？准备好调用了吗在文档末尾，在结束正文标记？jsFiddle之前，默认情况下将代码包装在window.onload事件中。在jsFiddle中，您只加载Chart.js（）的一个实例在您网站的索引底部，我觉得您正在加载另一个Chart.js实例。本地版本与JSFIDLE（1.0.2）中使用的版本不同吗？
<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>

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

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