利用json取得公開資料(3) 並繪製圖表

上次已經把資料放進表格內，接下來我們可以透過一些圖表功能來視覺化這些資料，這邊可以透過一些線上資源來繪製圖表。

圖表plugin：http://www.open-open.com/ajax/ajax20090708091447.htm

圖表

上面有我找到的一個圖表插件，就來試試看吧。不過在做之前要先注意到，json在取得之後並且放入表格是需要時間的，而圖表匯製的function也必須要在表格完成後執行，所以繪製的function必須放在json載入並寫入表格後執行。

//記得先載入以下的js 及 CSS
//visualize.jQuery.js
//visualize.jQuery.css


(function() {
  var epaAPI = "http://opendata.epa.gov.tw/ws/Data/AQX/?$orderby=SiteName&$skip=0&$top=1000&format=json&callback=?";
  var list = ''
  _DefaultContry = '台南市'
  //地點換成台南市

  $.getJSON( epaAPI, function(){
    format: "json"
  }).done(function(data) {
      $.each( data, function( i, item ) {
        console.log(item);
        if(item.County == _DefaultContry){
          list = '<tr><th>'+ item.SiteName+'</th><td>'+ item.PSI+'</td><td>'+ item.SO2+'</td><td>'+ item.NO2+'</td><td>'+ item.O3+'</td></tr>';     
          //表格列結構及資料

        $('.itemlist').append(list); 
        //將表格列插入table    
      };      
    });  
    $('#chartData').visualize({type: 'line'});
    //繪製圖表的function

    });
})();