如何将JSON与谷歌可视化地理地图结合使用
How to use JSON with Google Visualization Geo Map
我在谷歌可视化中制作了一个地理地图,它可以很好地使用JavaScript,但我需要能够实时更新,所以需要用JSON创建数据。
这是我想在JSON:中复制的js
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
我已经阅读了大约10次文档,我不明白如何将上面的内容构建成谷歌的示例格式:
{
"cols": [
{"id":"","label":"Topping","pattern":"","type":"string"},
{"id":"","label":"Slices","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
{"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
]
}
我不知道"c"、"v"、"f"answers"pattern"是什么,所以不明白如何为地理地图创建它。如果有人有任何想法,我将不胜感激!!
我尽我所能解释它。
{
// The 'cols' array contains all the columns of your chart.
"cols": [
{ // This object describes the first column.
// The first column has an empty string for its id, the label 'Topping',
// and the type 'string'. The 'pattern' is optional.
"id": "",
"label": "Topping",
"pattern": "",
"type": "string"},
{"id":"","label":"Slices","pattern":"","type":"number"}
],
// The 'rows' array contains all the rows of your chart.
"rows": [
// Each row object must have a 'c' property, which is an array of cells
// Each cell has a 'v' value and an 'f' value.
// The 'v' value contains the actual value of the cell.
// The 'f' value contains the formatted value of the cell.
{"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
{"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
]
}
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "getData.php",
dataType:"json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240});
}
谷歌在这里有一个指南:点击此链接了解详细信息
相关文章:
- javascript结合了数组和字典
- 谷歌地图固定位置覆盖
- 将Firebase与Electron结合使用
- 不显示带有本地json文件数据的谷歌地图脚本
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 结合jQuery和jetpack无限滚动
- 为什么可以'我将谷歌地图getCurrentPosition与地点搜索API相结合
- 如何将Angular Js与谷歌地图结合使用单击标记时渲染人员列表
- 将查询字符串参数与谷歌地图api v3服务结合使用
- 将谷歌地图 api v3 中的侦听器与谷歌图表相结合
- 谷歌地图API - 融合表/地图引擎打开/关闭..与搜索相结合
- 需要使用新数据重新绘制地图(与CartoDB.js结合使用)
- 将路线服务与谷歌地图中的自动完成服务结合使用
- 如何将谷歌地图和基于骨干视图的信息框结合起来
- 结合c和谷歌地图javascript API
- 如何将JSON与谷歌可视化地理地图结合使用
- 我试图结合JSON文件,在谷歌地图创建标记
- 如何结合地理位置和海拔在谷歌地图
- 结合地理位置和标记使用谷歌地图Javascript
- 如何结合两个谷歌地图API