我在谷歌图表上绘制数据时遇到了一些麻烦。
我有一个有效的版本。这里我在图表上有单行。数据以二维数组格式返回。我将其转换为Javascript数组。然后我继续绘制。
CASE - 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>
在这种情况下，我得到了一个漂亮的图表。
CASE - 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});
}
当我开始使用2-d阵列时，它开始给我带来麻烦。任何解决方案？
更新 - 正确的答案
问题在于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);
<% } %>
现在我的代码正常运作。
答案 0 :(得分：0)
应该始终使用setCell而不是setValue。带有手动数据的代码对我有用：
var te = [[25, 34, 22, 45], [45, 28, 19, 23]];
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.setCell(i, j+1, te[j][i]);
}
}