java - 使用 Google 图表显示没有列的表格

Question

尝试更改 JSON 格式以使其可供 Google 图表读取。JSON 内容工作正常，当前在浏览器上显示:

[["name","cost"],["godzilla",12],["harry potter",12]]

该任务正在由 Spring Controller 执行

  @RequestMapping(value = "api/productschart", method = RequestMethod.GET)

    public @ResponseBody
    String listProductsJsonChart () throws JSONException {

    JSONArray ProductArray = new JSONArray();
    JSONArray ProductHeader = new JSONArray();

    ProductHeader.put("id");
    ProductHeader.put("cost");

    ProductArray.put(ProductHeader);


    for (Product product : productRepository.findAll()) {
        JSONArray ProductJSON = new JSONArray();

        ProductJSON.put(product.getId());
        ProductJSON.put(product.getCost());

        ProductArray.put(ProductJSON);
    }
    return ProductArray.toString();
}

JavaScript 部分

  <script type="text/javascript">

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

  var jsonData = $.ajax({
    url: "http://localhost:8081/api/productschart",
    dataType: "json",
    async: false
  }).responseText;


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



  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

  chart.draw(data);
}
</script>

Answer 1

Google 页面上的示例使用单引号，因为它们使用 JavaScript 来构建对象，并且 JavaScript 支持单引号和双引号。另一方面，JSON 需要双引号。

table has no columns

来自 https://developers.google.com/chart/interactive/docs/gallery/columnchart#Data_Format 的示例，我认为你的 JSON 应该是这样的:

[["id","cost"],["1",12]]

即数组数据部分的第一项必须是字符串。就您而言，它是一个数字。