javascript – 使用JSON绘制谷歌图表

2019-10-06 13:41:40 阅读：151 来源： 互联网

标签：javascript jquery ajax google-visualization

如果它是一个单独的JSON文件,我如何检索和使用谷歌图表的数据集？我尝试过jQuery getJSON但是无法使用它.Google Viz应该使用JSON来绘制条形图
是否有原生谷歌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);
}

解决方法:

新的google.visualization.DataTable(json)有效.

查看dataTable.toJSON()的输出以获取正确的结构.

因此,如果您的服务器上有一个getjson.php脚本,它返回正确格式化的json,那么您可以这样做：

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

标签：javascript,jquery,ajax,google-visualization
来源： https://codeday.me/bug/20191006/1860780.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 使用JSON绘制谷歌图表