使用Google Charts显示表没有列

时间:2021-07-04 15:23:18

Trying to change the format of JSON to make it readable for Google charts. The JSON content is working fine and currently displaying this on the browser:

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

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

The Task is being performed by a 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();
}

The JavaScript section

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 个解决方案

#1


1  

The examples on Google's pages use single quotes because they use JavaScript to build objects and JavaScript supports both single and double quotes. JSON, on the other hand, requires double quotes.

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

table has no columns

表没有列

From the example at https://developers.google.com/chart/interactive/docs/gallery/columnchart#Data_Format, I think your JSON should look like this:

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

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

i.e. the first item in the data part of the array needs to be a string. In your case, it's a number.

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

#1


1  

The examples on Google's pages use single quotes because they use JavaScript to build objects and JavaScript supports both single and double quotes. JSON, on the other hand, requires double quotes.

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

table has no columns

表没有列

From the example at https://developers.google.com/chart/interactive/docs/gallery/columnchart#Data_Format, I think your JSON should look like this:

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

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

i.e. the first item in the data part of the array needs to be a string. In your case, it's a number.

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