圖表js與url的json文件

我是新來的，所以請原諒我的錯誤問。我正在從外部url使用json文件處理個人項目。但圖表沒有顯示出來。 Chrome編譯器說 Chart.min.js：12 Uncaught TypeError：t.ticks.map不是函數 Chart.min.js：12 Uncaught TypeError：無法讀取undefinedeventHandler的屬性'initialize'@ Chart.min.js： 12（匿名函數）@ Chart.min.js：12i。（匿名函數）@ Chart.min.js：12 注意：數組取值（對不起，如果我問這個錯誤的方法，我會嘗試改進我的問題）圖表js與url的json文件

<html> 
<head> 
<script type="text/javascript" src="Chart.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    </head> 
    <body> 
     <canvas id="myChart" width="400" height="200"></canvas> 
     <script> 
      var name; 
      var count; 
      $(document).ready(function() { 
       var jsonurl = "http://avare.pe.hu/veri2.json"; 

       $.getJSON(jsonurl, function (json) { 


        name = json[0]['names']; 
        count = json[0]['count']; 
        for (var i = 0; i < 5; i++) 
         console.log(name[i] + count[i]); 


       }); 
      }) 



      var canvas = document.getElementById('myChart'); 
      var dataSet = { 
       labels: name, 
       datasets: [ 
        { 
         label: "My First dataset", 
         backgroundColor: "rgba(255,99,132,0.2)", 
         borderColor: "rgba(255,99,132,1)", 
         borderWidth: 2, 
         hoverBackgroundColor: "rgba(255,99,132,0.4)", 
         hoverBorderColor: "rgba(255,99,132,1)", 
         data: count, 
        } 
       ] 
      }; 
      var option = { 
       animation: { 
        duration: 5000 
       } 

      }; 


      var myBarChart = Chart.Bar(canvas, { 
       data: dataSet, 
       options: option 
      }); 
     </script> 
    </body> 
</html>

來源

2016-08-23 Ymc

您正在創建圖表，你得到的值之前成功回調裏面的圖表創建，該圖的創建應在發生上的成功'getJSON'調用其他明智的你傳遞未定義的數據到你的圖表 – Quince

問題來自異步調用來獲取數據。在此調用之後開始圖表初始化，但是因爲在創建圖表時，它是異步name和count將是undefined。

快速的解決辦法是地方getJSON

https://fiddle.jshell.net/leighking2/45x1f09v/

來源

2016-08-23 12:52:39 Quince

Thanks.Worked像一個魅力。 – Ymc

圖表js與url的json文件

回答

相關問題