Google图表 - 单个图表上有多行

时间:2014-04-02 10:38:05

标签: java javascript jsp charts google-visualization

我在谷歌图表上绘制数据时遇到了一些麻烦。

我有一个有效的版本。这里我在图表上有单行。数据以二维数组格式返回。我将其转换为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);
                     <% } %>

现在我的代码正常运作。

1 个答案:

答案 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]);
    }
}