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更新全局变量

回答

相关问题