使用Google Charts显示表没有列

时间:2015-01-05 16:36:18

标签: java json spring google-visualization

尝试更改JSON的格式,使其可供Google图表使用。 JSON内容工作正常,目前在浏览器上显示:

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

任务由弹簧控制器执行

  @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>

1 个答案:

答案 0 :(得分:1)

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

  

表没有列

https://developers.google.com/chart/interactive/docs/gallery/columnchart#Data_Format的示例中,我认为您的JSON应如下所示:

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

即。数组的数据部分中的第一项需要是一个字符串。在你的情况下,它是一个数字。