Google 使用 JSON 显示空白的图表

Question

我一直在尝试从本地数据库中的一些数据中获取一些 Google 图表。我想我现在 JSON 已经正常出来了。

{
    "cols": [
        {
            "id": "",
            "label": "Inits",
            "pattern": "",
            "type": "string"
        },
        {
            "id": "",
            "label": "SalesVal",
            "pattern": "",
            "type": "number"
        }
    ],
    "rows": [
        {
            "c": [
                {
                    "v": "IS",
                    "f": null
                },
                {
                    "v": "1708.6000",
                    "f": null
                }
            ]
        },
        {
            "c": [
                {
                    "v": "NS",
                    "f": null
                },
                {
                    "v": "1098.8200",
                    "f": null
                }
            ]
        },
        {
            "c": [
                {
                    "v": "RC",
                    "f": null
                },
                {
                    "v": "458.8200",
                    "f": null
                }
            ]
        }
    ]
}

我将其用作 HTML。

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">

    // 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});
    }

    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

我已经检查了几次，看不出哪里错了。

Answer 1

这是因为 SalesVal 列是 number 类型，但单元格包含字符串值。

根据Format of the Constructor's JavaScript Literal data Parameter：

type [Required] Data type of the data in the column. Supports the following string values (examples include the v: property, described later):

'number' - JavaScript number value. Example values: v:7 , v:3.14, v:-55

话虽如此，您可以考虑以下选项：

选项 1. 将 getData.php 端点修改为 return 有效 json 数据google.visualization.DataTable:

"v": "1708.6000" //invalid (current) 
"v": 1708.6000   //valid

选项 2

确保 number type 的数据列包含 JavaScript 数字值，如下所示：

例子

var jsonData = {
    "cols": [
        {
            "id": "",
            "label": "Inits",
            "pattern": "",
            "type": "string"
        },
        {
            "id": "",
            "label": "SalesVal",
            "pattern": "",
            "type": "number"
        }
    ],
    "rows": [
        {
            "c": [
                {
                    "v": "IS",
                    "f": null
                },
                {
                    "v": "1708.6000",
                    "f": null
                }
            ]
        },
        {
            "c": [
                {
                    "v": "NS",
                    "f": null
                },
                {
                    "v": "1098.8200",
                    "f": null
                }
            ]
        },
        {
            "c": [
                {
                    "v": "RC",
                    "f": null
                },
                {
                    "v": "458.8200",
                    "f": null
                }
            ]
        }
    ]
};


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

function drawChart() {
    var data = new google.visualization.DataTable(prepareJsonData(jsonData));
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, { width: 400, height: 240 });
}

function prepareJsonData(json) {
    json.rows.forEach(function(row) {
        row.c[1].v = parseFloat(row.c[1].v);  //ensure number cell value 
    });
    return json;
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

Google 使用 JSON 显示空白的图表

Google chart showing blank using JSON

php

json

google-visualization