谷歌绘制图表使用JSON [英] draw google charts with JSON

问题描述

我如何可以检索和使用数据集的谷歌图表，如果它是一个独立的JSON文件？我试过的jQuery的getJSON但无法得到它的工作..谷歌的Viz应该使用JSON绘制条形图 是否有原生的谷歌API的方式？或者我能找到使用jQuery以及​​如何呀？ 谢谢

  //将可视化的API和饼图包。
  google.load（'可视化'，'1.0'，{'包'：'corechart']}）;

  //设置一个回调，当谷歌可视化的API被加载运行。
  google.setOnLoadCallback（drawChart）;

  //回调创建并填充数据表，
  //实例化的饼图，传递数据和
  //绘制它。
  功能drawChart（）{

      //创建的数据表。
      VAR数据=新google.visualization.DataTable（）;
      data.addColumn（'串'，'产品'）;
      data.addColumn（'编号'，'自动'）;
      data.addRows（[
        ['产品1'，85]，
        [产品2，75]，
        ['产品3'，90]
        ['产品4'，40]，
        ['产品5'，40]
      ]）;

      //设置图表选项
      VAR pie_options = {'标题'：'多少自动我们的产品？，
                     宽：520，高度：300
                    };
      VAR bar_options = {'宽度'：620，高度：300，
                        '标题'：'产品'，
                        hAxis：{'标题'：'％自动化'，'titleTextStyle：{颜色：红色，fontSize的：16}}
                      }
      //实例化和绘制我们的图表，传递一些选项。
      VAR图=新google.visualization.PieChart（的document.getElementById（'piechart_div'））;
      chart.draw（数据，pie_options）;

     VAR图=新google.visualization.ColumnChart（的document.getElementById（'barchart_div'））;
     chart.draw（数据，bar_options）;
}
 

解决方案

新google.visualization.DataTable（JSON）和

看的输出<一个href="https://$c$c.google.com/apis/chart/interactive/docs/reference.html#DataTable"><$c$c>dataTable.toJSON()为正确的结构来使用。

所以，如果你有你的服务器上getjson.php脚本返回格式正确的JSON，你可以这样做：

  $。的getJSON（'/ getjson.php'，函数（JSON）{
    VAR的dataTable =新google.visualization.DataTable（JSON）;
}）;
 

How can I retrieve and use a dataset for google charts if it was a separate JSON file?? I tried jQuery getJSON but couldn't get it worked.. Google Viz should use the JSON to draw a bar chart Is there a native google API way? or can I find a way using jQuery and how? Thanks

      // 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) works.

Look the output of dataTable.toJSON() for the correct structure to use.

So, if you have a getjson.php script on your server that returns correctly formatted json, you could do that:

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

这篇关于谷歌绘制图表使用JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！