Question

我需要显示带有动态json数据的Google图表。在这种情况下，它是一个仅包含一个json项目的计量表：

{
  "Label": "1",
  "Waterlevel": "82"
}

我的代码没有产生错误。但是也不会生成图表。

<script type="text/javascript">

    google.load('visualization', '1', {packages: ['gauge']});
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        $.ajax({
            url: 'getWaterLevel',
            dataType: 'JSON',
            success: function (jsonData) {
                var data = new google.visualization.DataTable();

                data.addColumn('string', 'Label');
                data.addColumn('number', 'Waterlevel');

                for (var i = 0; i < jsonData.length; i++) {
                    data.addRow([jsonData[i].Label, jsonData[i].Waterlevel]);
                }

                var options = {
                    width: 400, height: 120,
                    redFrom: 90, redTo: 100,
                    yellowFrom:75, yellowTo: 90,
                    minorTicks: 5
                };

                var chart = new google.visualization.Gauge(document.getElementById('waterlevel_div'));
                chart.draw(data, options);

                console.log(jsonData);
            }
        });
    }

    google.setOnLoadCallback(drawChart);

</script>
<div id="waterlevel_div" style=""></div>

Answer 1

json中Waterlevel的值由字符串表示，
需要转换为数字。

尝试使用parseFloat ...

parseFloat(jsonData[i].Waterlevel)

编辑：似乎在这里可以正常工作，并带有硬编码的json。

google.charts.load('current', {
    packages: ['gauge']
}).then(function () {

  var jsonData = {
      "Label": "1",
      "Waterlevel": 82
  };

  var data = new google.visualization.DataTable();

  data.addColumn('string', 'Label');
  data.addColumn('number', 'Waterlevel');

  var row = [];
  for (var key in jsonData) {
    row.push(jsonData[key]);
  }
  data.addRow(row);

  var options = {
      width: 400, height: 120,
      redFrom: 90, redTo: 100,
      yellowFrom:75, yellowTo: 90,
      minorTicks: 5
  };

  var chart = new google.visualization.Gauge(document.getElementById('waterlevel_div'));
  chart.draw(data, options);

});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="waterlevel_div"></div>

注意：您使用的是旧版的Google图表，因此不再使用。
建议使用较新的库loader.js

<script src="https://www.gstatic.com/charts/loader.js"></script>

根据{{3}} ...

，

而不是jsapi

通过jsapi加载程序仍然可用的Google Charts版本不再被一致更新。从现在开始，请使用新的静态加载器。

这只会更改load语句，请参见release notes ...

使用JSON动态数据绘制Google图表

1 个答案: