尝试更改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>
答案 0 :(得分:1)
Google网页上的示例使用单引号,因为它们使用JavaScript构建对象,JavaScript支持单引号和双引号。另一方面,JSON需要双引号。
表没有列
从https://developers.google.com/chart/interactive/docs/gallery/columnchart#Data_Format的示例中,我认为您的JSON应如下所示:
[["id","cost"],["1",12]]
即。数组的数据部分中的第一项需要是一个字符串。在你的情况下,它是一个数字。