javascript - 使用从服务器收到的数据更新 Google 图表

Question

如何使用新数据更改图表？我从对服务器的 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 );
        });
    );
}

Answer 1

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]
]);