Java 谷歌图表-一张图表上有多行
我在谷歌图表上绘制数据时遇到了一些麻烦 我有一个有效的版本。这里我在图表上有一条线。数据以2d数组格式返回。我将其转换为Javascript数组。然后我继续策划 案例1 将数据返回到JSP的JAVA代码Java 谷歌图表-一张图表上有多行,java,javascript,jsp,charts,google-visualization,Java,Javascript,Jsp,Charts,Google Visualization,我在谷歌图表上绘制数据时遇到了一些麻烦 我有一个有效的版本。这里我在图表上有一条线。数据以2d数组格式返回。我将其转换为Javascript数组。然后我继续策划 案例1 将数据返回到JSP的JAVA代码 public int[][] getResult(Long ExpId, String CompareField){ int[][] multi = new int[1][11]; Gson gson =
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;
}
<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>
</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>
load（'visualization'，'1'，'{
“包”：[“核心图表”]
});
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawChart）；
函数绘图图（）{
变量te=[[]]；
它应该始终是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]);
}
}
var te=[[25,34,22,45]，[45,28,19,23]；
var data=new google.visualization.DataTable（）；
var len=te[0]。长度；
data.addColumn（'string'，'State'）；
data.addColumn（'number'，'State Rank'）；
data.addColumn（'number'，'age'）；
data.addRows（len）；
对于（变量i=0；i
我将其更改为setCell，但这对我也不起作用。我最初使用setCell，但后来将其更改为setValue以检查是否有效。我使用了var te=[[25,34,22,45]，[45,28,19,23]]；在我的代码中，它是有效的。我想我在构造te数组时遇到了一些问题。你知道为什么它不起作用吗？@sid首先你应该创建所有的内部数组，对于两个数组，它是var te=[]，[]；
。另外，你应该使用数字而不是字符串，在这里删除引号te[]=；
感谢您指出数组的错误。我正在用正确的数组格式更新我的问题。再次感谢您的帮助。：）
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= 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);
<% } %>
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]);
}
}