【发布时间】：2014-05-13 13:54:38
【问题描述】：
我在谷歌图表上绘制数据时遇到了一点麻烦。
我有一个可用的版本。在这里，我在图表上有一条线。数据以二维数组格式返回。我将其转换为 Javascript 数组。然后我继续进行剧情。
案例 - 1
将数据返回给 JSP 的 JAVA 代码
public int[][] getResult(Long ExpId, String CompareField){
int[][] multi = new int[1][11];
Gson gson = new GsonBuilder().create();
multi[0][0] = 199;
multi[0][1] = 379;
multi[0][2] = 447;
multi[0][3] = 360;
multi[0][4] = 996;
multi[0][5] = 398;
multi[0][6] = 435;
multi[0][7] = 385;
multi[0][8] = 1151;
multi[0][9] = 270;
multi[0][10] = 330;
String m = gson.toJson(multi);
return multi;
}
绘制图形的JSP代码，
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function procChart(){
<% System.out.println("Inside procChart"); %>
var ExpList = new Array();
ExpList = request.getParameterValues("chkExps");
ExpList.push(request.getParameter("expId"));
<jsp:useBean id="compare"
class="org.server.experiment.CompareResults" />
<%int[][] data4= compare.getResult(Long.valueOf(request.getParameter("expId")), request.getParameter("field")); %>;
<% System.out.println(data4); %>
// Load the Visualization API and the piechart package.
}
</script>
<script type="text/javascript">
google.load('visualization', '1', {
'packages' : [ 'corechart' ]
});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var te = [[]];
<% for (int i=0; i<data4.length; i++) { %>
<% for (int j=0; j<data4[i].length; j++) { %>
te[<%= i %>][<%= j %>] = "<%= data4[i][j] %>";
<% System.out.println(data4[i][j]); %>;
<% } %>
<% } %>
//var te = [[1,2,3,4,5,6,7,8,9,10]];
var data = new google.visualization.DataTable();
var len = te[0].length;
data.addColumn('string', 'State');
data.addColumn('number', 'State Rank');
data.addColumn('number', 'age');
data.addRows(len);
for (var i = 0; i < len; i++) {
data.setCell(i, 0, ""+(i+1));
for (var j = 0; j < 1; j++) {
data.setValue(i, j+1, te[j][i]);
}
}
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document
.getElementById('chart_div'));
chart.draw(data, {
width : 400,
height : 240
});
}
</script>
在这种情况下，我得到了一个很好的图表。
案例 - 2
但是，我希望能够在同一个图表上绘制多条线并尝试了这个。但我看到一个空白页。我找不到哪里出错了。
返回数组的JAVA代码
public int[][] getResult(Long ExpId, String CompareField){
int[][] multi = new int[2][11];
Gson gson = new GsonBuilder().create();
multi[0][0] = 199;
multi[0][1] = 379;
multi[0][2] = 447;
multi[0][3] = 360;
multi[0][4] = 996;
multi[0][5] = 398;
multi[0][6] = 435;
multi[0][7] = 385;
multi[0][8] = 1151;
multi[0][9] = 270;
multi[0][10] = 330;
multi[1][0] = 299;
multi[1][1] = 479;
multi[1][2] = 547;
multi[1][3] = 660;
multi[1][4] = 496;
multi[1][5] = 298;
multi[1][6] = 635;
multi[1][7] = 185;
multi[1][8] = 1051;
multi[1][9] = 470;
multi[1][10] = 130;
String m = gson.toJson(multi);
return multi;
}
二维数组如下所示 [[199,379,447,360,996,398,435,385,1151,270,330],[299,479,547,660,496,298,635,185,1051,470,130]]
JSP 脚本
</script>
<script type="text/javascript">
google.load('visualization', '1', {
'packages' : [ 'corechart' ]
});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var te = [[]];
<% for (int i=0; i<data4.length; i++) { %>
<% for (int j=0; j<data4[i].length; j++) { %>
te[<%= i %>][<%= j %>] = "<%= data4[i][j] %>";
<% System.out.println(data4[i][j]); %>;
<% } %>
<% } %>
//var te = [[1,2,3,4,5,6,7,8,9,10]];
var data = new google.visualization.DataTable();
var len = te[0].length;
data.addColumn('string', 'State');
data.addColumn('number', 'State Rank');
data.addColumn('number', 'age');
data.addRows(len);
for (var i = 0; i < len; i++) {
data.setCell(i, 0, ""+(i+1));
for (var j = 0; j < 2; j++) {
data.setValue(i, j+1, te[j][i]);
}
}
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document
.getElementById('chart_div'));
chart.draw(data, {
width : 400,
height : 240
});
}
</script>
Google 需要这种格式来显示图表，我尝试使用手动数据（如下图）绘制图表并成功。但是动态地（如上例2所示），我无法得到它。
function drawChart() {
<% System.out.println("Inside drawChart"); %>
var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('number', 'salary');
data.addColumn('number', 'age');
data.addRows(6);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, 10);
data.setCell(0, 2, 20);
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, 20);
data.setCell(1, 2, 25);
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, 30);
data.setCell(2, 2, 30);
data.setCell(3, 0, 'Frank');
data.setCell(3, 1, 40);
data.setCell(3, 2, 35);
data.setCell(4, 0, 'Floyd');
data.setCell(4, 1, 50);
data.setCell(4, 2, 20);
data.setCell(5, 0, 'Fritz');
data.setCell(5, 1, 60);
data.setCell(5, 2, 40);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240});
}
从我开始使用二维数组的那一刻起，它就开始给我带来麻烦。有什么解决办法吗？
更新 - 正确答案
所以问题出在 var te 数组上。这是制作数组的正确方法。
var te= new Array();
<% for (int i=0; i<data4.length; i++) { %>
var xe = [];
<% for (int j=0; j<data4[i].length; j++) { %>
xe[<%= j %>] = <%= data4[i][j] %>;
<% } %>
te.push(xe);
<% } %>
现在我的代码可以工作了。
【问题讨论】：
标签： java javascript jsp charts google-visualization