代碼工作正常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，但一個功能不工作在網站上

回答

相關問題