代码工作正常jsfiddle，但一个功能不工作在网站上

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

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

可能是什么问题呢？

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 //

小提琴代码：

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

网站代码指数 - 标头：

<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>

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

来源

2016-04-09 Matt

你在代码中遇到什么错误？什么？ – JordanHendrix

@JordanHendrix没有任何错误或任何东西，该函数只是不被访问/调用任何东西，即使它显然存在于小提琴和我的网站代码的选项数组中。 – Matt

你能告诉我们其余的代码吗？你在哪里调用函数？ – JordanHendrix

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

来源

2016-04-09 23:35:56

代码工作正常jsfiddle，但一个功能不工作在网站上

回答

相关问题