使用谷歌API在jsp頁面上顯示流程圖的最佳方式

我有一個關於谷歌API流程圖的問題。我想在一個jsp頁面上添加幾個流程圖。在我的流程圖控制器中，我運行從數據庫中獲得的列表，並且想要爲流程圖製作一個foreach。使用谷歌API在jsp頁面上顯示流程圖的最佳方式

將此添加到模型並在jsp頁面上顯示的最佳方式是什麼？

流程代碼是這樣的：

<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Year', 'Sales', 'Expenses'], 
     ['2004', 1000,  400], 
     ['2005', 1170,  460], 
     ['2006', 660,  1120], 
     ['2007', 1030,  540] 
    ]); 

    var options = { 
     title: 'Company Performance' 
    }; 

    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
    } 
</script>

該代碼，但我值填充，在for循環，但我不知道如何給它的模式呢？（As String does not work我只是試過：D）

來源

2012-06-27 user1480139

做了所有地圖中使用同一div 「chart_div」？ –

是的，如果可能的話。 – user1480139

你不能這樣做，地圖將被覆蓋。您必須使用不同的div併爲setOnLoadCallback註冊每個div。 –

用於在1頁中顯示2個圖表的代碼。您可以調整邏輯並達到您的要求。 Docs

 // Load the Visualization API and the piechart package. 
     google.load('visualization', '1.0', {'packages':['corechart']}); 

     // Set a callback to run when the Google Visualization API is loaded. 
     google.setOnLoadCallback(drawChart1); 
     google.setOnLoadCallback(drawChart2); 

     // Callback that creates and populates a data table, 
     // instantiates the pie chart, passes in the data and 
     // draws it. 
     function drawChart1() { 

     // Create the data table. 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Topping'); 
     data.addColumn('number', 'Slices'); 
     data.addRows([ 
      ['Mushrooms', 3], 
      ['Onions', 1], 
      ['Olives', 1], 
      ['Zucchini', 1], 
      ['Pepperoni', 2] 
     ]); 

     // Set chart options 
     var options = {'title':'How Much Pizza I Ate Last Night', 
         'width':400, 
         'height':300}; 

     // Instantiate and draw our chart, passing in some options. 
     var chart = new google.visualization.PieChart(document.getElementById('chart_div1')); 
     chart.draw(data, options); 
     } 
     function drawChart2() { 

     // Create the data table. 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Topping'); 
     data.addColumn('number', 'Slices'); 
     data.addRows([ 
      ['Mushrooms', 3], 
      ['Onions', 1], 
      ['Olives', 1], 
      ['Zucchini', 1], 
      ['Pepperoni', 2] 
     ]); 

     // Set chart options 
     var options = {'title':'How Much Pizza I Ate Last Night', 
         'width':400, 
         'height':300}; 

     // Instantiate and draw our chart, passing in some options. 
     var chart = new google.visualization.BarChart(document.getElementById('chart_div2')); 
     chart.draw(data, options); 
     } 

    </script> 
    </head> 

    <body> 
    <!--Div that will hold the pie chart--> 
    <div id="chart_div1"></div> 
    <div id="chart_div2"></div> 
    </body> 
</html>

來源

2012-06-27 10:17:31

使用谷歌API在jsp頁面上顯示流程圖的最佳方式

回答

相關問題