[英]draw google charts with JSON
How can I retrieve and use a dataset for google charts if it was a separate JSON file??如果它是单独的 JSON 文件,我如何检索和使用谷歌图表的数据集? 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?
我尝试了 jQuery getJSON 但无法正常工作.. Google Viz 应该使用 JSON 来绘制条形图 是否有原生 google API 方式? or can I find a way using jQuery and how?
或者我可以找到使用 jQuery 的方法吗? 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. new google.visualization.DataTable(json)
有效。
Look the output of dataTable.toJSON()
for the correct structure to use.查看
dataTable.toJSON()
的 output 以了解要使用的正确结构。
So, if you have a getjson.php script on your server that returns correctly formatted json, you could do that:因此,如果您的服务器上有一个 getjson.php 脚本返回正确格式的 json,您可以这样做:
$.getJSON('/getjson.php', function(json) {
var dataTable = new google.visualization.DataTable(json);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.