如何使用新数据更改图表?我从对服务器的 API 调用中获取数据,我可以在控制台中看到这些数据。如何用它更新图表?
map.on('singleclick', function(evt) {
var coordinate = evt.coordinate;
var hdms = ol.proj.transform(
coordinate, 'EPSG:3857', 'EPSG:4326');
$.get("http://127.0.0.1:5000/stats?lat="+hdms[1]+"&lon="+hdms[0],
function(data) {
console.log( data );
});
);
}
最佳答案
1)首先加载谷歌
google.charts.load
可以替换 --> $(document).ready
(或类似的)
2) 创建图表
3)获取数据
类似...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
// save reference to chart here
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
map.on('singleclick', function(evt) {
var coordinate = evt.coordinate;
var hdms = ol.proj.transform(
coordinate, 'EPSG:3857', 'EPSG:4326');
$.get("http://127.0.0.1:5000/stats?lat="+hdms[1]+"&lon="+hdms[0],
function(data) {
console.log( data );
// draw chart here
chart.draw(data);
});
);
};
});
<小时/>
更新
您必须创建一个 DataTable绘制图表
创建数据表有几种方法
1) 可以使用JSON,但必须采用以下格式,如 found here
var jsonData = {
cols: [
{label: 'x', type: 'number'},
{label: 'y', type: 'number'}
],
rows: [
{c:[{v: 0}, {v: 0}]},
{c:[{v: 1}, {v: 1}]}
]
}
var dataTable = new google.visualization.DataTable(jsonData);
2)您可以使用简单的数组数据和静态方法arrayToDataTable
var arrayData = [
['x', 'y'],
[0, 0],
[1, 1]
];
var dataTable = google.visualization.arrayToDataTable(arrayData);
3) 或手动添加列和行
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number', 'x');
dataTable.addColumn('number', 'y');
dataTable.addRow([0, 0]);
// -- or addRows --
dataTable.addRows([
[0, 0],
[1, 1]
]);
关于javascript - 使用从服务器收到的数据更新 Google 图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47797309/