簡體   English   中英

用 JSON 繪制谷歌圖表

[英]draw google charts with JSON

如果它是單獨的 JSON 文件,我如何檢索和使用谷歌圖表的數據集? 我嘗試了 jQuery getJSON 但無法正常工作.. Google Viz 應該使用 JSON 來繪制條形圖 是否有原生 google API 方式? 或者我可以找到使用 jQuery 的方法嗎? 謝謝

      // Load the Visualization API and the piechart package.
  google.load('visualization', '1.0', {'packages':['corechart']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table, 
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Products');
      data.addColumn('number', 'Automated');
      data.addRows([
        ['Product 1', 85],
        ['Product 2', 75],
        ['Product 3', 90], 
        ['Product 4', 40],
        ['Product 5', 40]
      ]);

      // Set chart options
      var pie_options = {'title':'How Much Automated our Products are?',
                     'width':520,'height':300
                    };
      var bar_options ={'width': 620, 'height': 300, 
                        'title': 'Products',
                        'hAxis': {'title': '% Automated', 'titleTextStyle': {'color': 'red', 'fontSize': 16}}
                      }
      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('piechart_div'));
      chart.draw(data, pie_options);

     var chart = new google.visualization.ColumnChart(document.getElementById('barchart_div'));
     chart.draw(data, bar_options);
}

new google.visualization.DataTable(json)有效。

查看dataTable.toJSON()的 output 以了解要使用的正確結構。

因此,如果您的服務器上有一個 getjson.php 腳本返回正確格式的 json,您可以這樣做:

$.getJSON('/getjson.php', function(json) {
    var dataTable = new google.visualization.DataTable(json);
});

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM