JavaGoogle在一个图表上绘制多条线
我在谷歌图表上绘制数据时遇到了一些麻烦
我有一个有效的版本。这里我在图表上有一条线。数据以2d数组格式返回。我将其转换为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（长ExpId，字符串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;
}
二维阵列看起来像这样[[199379447360996398435385151270330]，[299495476604962986351851051470130]]
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>
谷歌需要这种格式来显示图表，我尝试使用手动数据（如下所示）来绘制图表，并获得了成功。但是动态地（如上面案例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);
<% } %>
现在我的代码工作了
# 1 楼答案
它应该始终是
setCell，而不是您使用的setValue。此代码包含手动数据，适用于我：