Question

我是“谷歌图表可视化API”的新手，我正在尝试将数据从控制器传递到图表，但不知道错误在哪里。我的控制器看起来像这样：

@RequestMapping(value="chart", method = RequestMethod.GET)

    public String chart(Model model) throws TypeMismatchException
    {
        DataTable data=new DataTable();

        data.addColumn(new ColumnDescription("kpi", ValueType.TEXT, "KPI"));
        data.addColumn(new ColumnDescription("Advanced",ValueType.NUMBER, "Advanced"));
        data.addColumn(new ColumnDescription("Basic",ValueType.NUMBER, "Basic"));
        data.addRowFromValues("#engagements", 20, 13);
        data.addRowFromValues("Bob", 35,10);
        data.addRowFromValues("Alice", 44,1);
        //ArrayList cs=new ArrayList<>;
        return JsonRenderer.renderDataTable(data, true, true).toString();

    }

    @RequestMapping(value="chart",method = RequestMethod.POST)
    public String chart1(
            )
    {
        return "CHART";
    }

我的jsp页面是：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<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>
// Load the Google Visualization Library and Google chart libraries including the corechart package
google.load('visualization', '1', {'packages':['columnchart']});
google.setOnLoadCallback(drawChart);
// Custom drawChart function to create the charts
function drawChart() {
try {
     var jsonData = $.ajax({
        url: "http://localhost:8080/test3/chart",
        dataType:"json",
        async: false
        }).responseText; 
     jsonData = JSON.stringify(eval("(" + jsonData + ")"));
    var data = new google.visualization.DataTable(jsonData,false);
    alert(jsonData);
// 'false' means that the first row contains labels, not data.
var chart = new google.visualization.ColumnChart(document
.getElementById( "divId" ));
var options = {width: 400, height: 240, is3D: true, title: 'Company Earnings'};
chart.draw(data, options);
} catch (err) {
alert( err.message );
}
}
</script>
</head>
<body>
<!-- HTML div container code to contain the drawn chart -->
<div>
<div id="divId" style="width: 800px; height: 400px;"></div>
</div>
</body>
</html>

提前感谢您提出任何建议

Answer 1

即使我正在寻找这个......因为我是新手，我没有解决方案。但我遇到了以下链接 https://developers.google.com/chart/interactive/docs/reference 休息控制器应以下列格式给出结果

var dt = new google.visualization.DataTable({
    cols: [{id: 'task', label: 'Task', type: 'string'},
           {id: 'hours', label: 'Hours per Day', type: 'number'}],
    rows: [{c:[{v: 'Work'}, {v: 11}]},
           {c:[{v: 'Eat'}, {v: 2}]},
           {c:[{v: 'Commute'}, {v: 2}]},
           {c:[{v: 'Watch TV'}, {v:2}]},
           {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}]
    }, 0.6);

以下示例创建一个新的空DataTable，然后使用与上面相同的数据手动填充它：

var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
  ['Work', 11],
  ['Eat', 2],
  ['Commute', 2],
  ['Watch TV', 2],
  ['Sleep', {v:7, f:'7.000'}]
]);

从Spring mvc控制器向jsp页面发送数据到谷歌图表可视化api

1 个答案: