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可以替换 - ＆gt; $(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]
]);

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

1 个答案: