Google API가있는 jsp 페이지에 flowcharts를 표시하는 가장 좋은 방법

google api flowcharts에 대한 질문이 있습니다. 하나의 JSP 페이지에서 몇 가지 순서도를 추가하고 싶었습니다. 내 플로차트 컨트롤러에서는 데이터베이스에서 가져온 목록을 실행하고 foreach를 순서도로 만들고 싶습니다.Google API가있는 jsp 페이지에 flowcharts를 표시하는 가장 좋은 방법

모델에 이것을 추가하고 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>

그 코드 만이 채워집니다는 루프에 대한하지만 난 모델을 제공하는 방법을 몰라? (문자열이 작동하지 않으므로 방금 시도했습니다 : D)

출처

2012-06-27 user1480139

Docs는 모든 맵이 동일한 DIV "chart_div"를 사용합니까? –

가능하면 가능합니다. – user1480139

당신은 그렇게 할 수 없습니다.지도는 쓰여집니다. 다른 div를 사용하고 setOnLoadCallback에 대해 각각을 등록해야합니다. –

1 페이지에 2 개의 차트를 표시하는 코드입니다. 논리를 조정하여 요구 사항을 충족시킬 수 있습니다.

 // 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

Google API가있는 jsp 페이지에 flowcharts를 표시하는 가장 좋은 방법

답변

관련 문제