charts.js更新全局變量

有一些問題讓下面的工作。我不知道它的前夕是否可以閱讀有關在charts.js中重新創建圖表的一些帖子，但不確定這是否需要在這裏。將函數的值傳遞給donutData變量的簡單示例。charts.js更新全局變量

<!doctype html> 
<html> 
<head> 
    <title>Doughnut Chart</title> 
    <script src="../Chart.js"></script> 
    <style> 
     body{ 
      padding: 0; 
      margin: 0; 
     } 
     #canvas-holder{ 
      width:30%; 
     } 
    </style> 
</head> 
<body> 
    <div id="canvas-holder"> 
     <canvas id="chart-area" width="500" height="500"/> 
    </div> 

<div id="demo">dd</div> 

<button onclick="myFunction(20,30,50)">Click me</button> 


<script> 

var doughnutData = {}; 

function myFunction(a,b,c) 
     { 

      var item1 = parseInt(a); 
      var item2 = parseInt(b); 
      var item3 = parseInt(c); 

      var total = item1 + item2 + item3; 

      var ITEM1PERCENT = (item1/total) * 100; 
      var ITEM2PERCENT = (item2/total) * 100; 
      var ITEM3PERCENT = (item3/total) * 100; 

      if(isNaN(ITEM1PERCENT)) { 
       var ITEM1PERCENT = 0; 
      } 
      if(isNaN(ITEM2PERCENT)) { 
       var ITEM2PERCENT = 0; 
      } 
      if(isNaN(ITEM3PERCENT)) { 
       var ITEM3PERCENT = 0; 
      } 

      var doughnutData = [ 
      { 
       value: ITEM1PERCENT.toFixed(2), 
       color:"#F7464A", 
       highlight: "#FF5A5E", 
       label: "Red" 
      }, 
      { 
       value: ITEM2PERCENT.toFixed(2), 
       color: "#46BFBD", 
       highlight: "#5AD3D1", 
       label: "Green" 
      }, 
      { 
       value: ITEM3PERCENT.toFixed(2), 
       color: "#FDB45C", 
       highlight: "#FFC870", 
       label: "Yellow" 
      } 

     ]; 



    loadFunction(); 
      document.getElementById("demo").innerHTML = doughnutData; 
     } 

    function loadFunction() 
       { 
     var ctx = document.getElementById("chart-area").getContext("2d"); 
     window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true}); 
     } 


     window.onload = function(){ 
      var ctx = document.getElementById("chart-area").getContext("2d"); 
      window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true}); 
     }; 

myFunction(1,2,3); 

</script> 
</body> 
</html>

任何指針或幫助讚賞。

來源

2014-11-02 Jon Brown

您正在使用「var doughnutData」在myFunction（..）中定義一個局部變量doughnutData。刪除該「var」並使其成爲全局。

doughnutData = [ 
     { 
      value: ITEM1PERCENT.toFixed(2), 
      color:"#F7464A", 
      highlight: "#FF5A5E", 
      label: "Red" 
     }, 
     { 
      value: ITEM2PERCENT.toFixed(2), 
      color: "#46BFBD", 
      highlight: "#5AD3D1", 
      label: "Green" 
     }, 
     { 
      value: ITEM3PERCENT.toFixed(2), 
      color: "#FDB45C", 
      highlight: "#FFC870", 
      label: "Yellow" 
     } 

    ];

來源

2014-11-02 20:40:03

但變量doughnutData是拉動從myFunction的功能屬性，如果我讓全球性的，如何我可以通過本地變量從myFunction的全局變量並觸發圖的重繪？ – 2014-11-04 08:13:13

目前還不清楚你在問什麼。 – 2014-11-04 17:27:43

只需刪除'var'即可。 Sampath的意思是「刪除」var「，從而使其成爲全球性的。 >>。 * global *變量仍然會從函數中接收局部變量，因爲它們仍然被稱爲函數內部的*。 – sisou 2015-02-20 15:39:59

charts.js更新全局變量

回答

相關問題