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"를 제거하고 그것을 글로벌하게 만드십시오. I가 글로벌 만들면

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이 함수의 속성을 당기는? –

당신이 무엇을 요구하고 있는지 명확하지 않습니다. –

'var'만 제거하면됩니다. Sampath가 의미하는 바는 << "var"을 제거하고 * 따라서 * 전역 화하는 것을 의미합니다. >>. * global * 변수는 함수 내부에서 * 여전히 참조되기 때문에 여전히 함수에서 로컬 변수를받습니다. – sisou

charts.js 전역 변수 업데이트

답변

관련 문제