0

我已经编写了以下代码来绘制图形。名称是：Test1.zul

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
 <zk xmlns:n="native">
 <window border="normal">
 <html>
 <head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Trinet</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?  family=Open+Sans:300,400,700"/>
<h4 backgroung-color="#800000">
<a href="Test1.zul"> <img src="Image/5.png" style="width:200px;height:50px;float:left;"/></a></h4>
<h2 align="center">TriNet Automation Platform</h2>
<h5 align="right">
Welcome Administrator
</h5>
</head>

 <body>

    <div >

  <li data-filtertext="Homepage"><a href="Test1.zul">Home</a></li>
  <li data-filtertext="Create Job"><a href="" data-ajax="false">Create Job</a></li>
 <li data-filtertext="Job progress"><a href="" data-ajax="false">Job Progress</a></li>
<li data-filtertext="Scripting"><a href="" data-ajax="false">Scripting</a>         </li>
<li data-filtertext="Report"><a href="" data-ajax="false">Report</a></li>
<li data-filtertext="Locators"><a href="" data-ajax="false">Locators</a></li>
<li data-filtertext="VM Management"><a href="" data-ajax="false">VM Management</a></li>
<li data-filtertext="Options"><a href="" data-ajax="false">Options</a></li>


    </div>



    <!--Divs that will hold the charts-->
    <table class="columns">
    <tr>
    <td>
    <div class = "MyForm1" style="border: solid 2px #000000; width:auto; height:300px;" align="center">
    <form>
    <table>
 <tr>
<td>
  <select id="Projects">
 <option value = "0" selected = "1">Select Project</option>
 <option value="Project 1">Project 1</option>
 <option value="Project 2">Project 2</option>
 <option value="Project 3">Project 3</option>
 <option value="Project 4">Project 4</option>
 <option value="Project 5">Project 5</option>
  </select>
 </td>
 <td>
  <select id="ChartType" name="ChartType" onchange="drawChart()">
 <option value = "PieChart">Select Chart Type </option>
 <option value="PieChart">PieChart </option>
 <option value="Histogram">Histogram </option>
 <option value="LineChart">LineChart </option>
 <option value="BarChart">BarChart </option>
  </select>
   </td>
  </tr>

  </table>
<table>
<tr>
<select id="Version">
 <option value = "0" selected = "1">Select Version</option>
 <option value="Version 1">Version 1</option>
 <option value="Version 2">Version 2</option>
 <option value="Version 3">Version 3</option>
 <option value="Version 4">Version 4</option>
 <option value="Version 5">Version 5</option>
  </select>
 </tr>

 </table>       
    </form>
    </div>
    </td>
    <td><div id="chart_div" style="border: solid 2px #000000;" ></div>
    </td>
    <td><div id="chart_div2" style="border: solid 2px #000000;"></div></td>
    </tr>
    <tr>
    <td><div id="chart_div3" style="border: solid 2px #000000;"></div></td>
    <td><div id="chart_div4" style="border: solid 2px #000000;"></div></td>
    <td><div id="chart_div5" style="border: solid 2px #000000;"></div></td>
    </tr>
    </table>
          <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi">   </script>
    <script type="text/javascript">

      // 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(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.

      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Test Case');    
        data.addColumn('number', 'Total Number');
        data.addRows([
          ['Total Test Case', 50],
          ['Test Case Executed', 30],
          ['Failed Test Case', 08],
          ['Test Case Not Executed', 5],
        ]);
        // Create the data table.
        var data2 = new google.visualization.DataTable();
        data2.addColumn('string', 'Topping');
        data2.addColumn('number', 'Slices');
        data2.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 15],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        var data3 = new google.visualization.DataTable();
        data3.addColumn('string', 'Year');
        data3.addColumn('number', 'Sales');
        data3.addColumn('number', 'Expenses');
        data3.addRows([
          ['2004', 1000, 400],
          ['2005', 1170, 460],
          ['2006',  860, 580],
          ['2007', 1030, 540]
        ]);

        var data4 = new google.visualization.DataTable();
        data4.addColumn('string', 'Year');
        data4.addColumn('number', 'Sales');
        data4.addColumn('number', 'Expenses');
        data4.addRows([
          ['2004', 1000, 400],
          ['2005', 1170, 460],
          ['2006',  860, 580],
          ['2007', 1030, 540]
        ]);

        var data5 = new google.visualization.DataTable();
        data5.addColumn('string', 'Year');
        data5.addColumn('number', 'Sales');
        data5.addColumn('number', 'Expenses');
        data5.addRows([
          ['2004', 1000, 400],
          ['2005', 1170, 460],
          ['2006',  860, 580],
          ['2007', 1030, 540]
        ]);

        // Set chart options
        var options = {'title':'Test Case Details',
                       'width':400,
                       'height':300};
        // Set chart options
        var options2 = {'title':'Test Case Details',
                       'width':400,
                       'height':300};
        // Set chart options
        var options3 = {'title':'Weekly Release',
                       'width':400,
                       'height':300};
        // Set chart options
        var options4 = {'title':'Monthly Release',
                       'width':400,
                       'height':300};
        // Set chart options                           
        var options5 = {'title':'Automation Cost Saving',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
         var chart = new google.visualization[document.getElementById("ChartType").value](document.getElementById('chart_div'));
        chart.draw(data, options);
        var chart2 = new google.visualization.Histogram(document.getElementById('chart_div2'));
        chart2.draw(data2, options2);
        var chart3 = new google.visualization.LineChart(document.getElementById('chart_div3'));
        chart3.draw(data3, options3);
        var chart4 = new google.visualization.LineChart(document.getElementById('chart_div4'));
        chart4.draw(data4, options4);
        var chart5 = new google.visualization.BarChart(document.getElementById('chart_div5'));
        chart5.draw(data5, options5);

      }
    </script>


  </body>

 </html>

 </window>
</zk>

在这里，我通过 javascript 将值传递给图形。但是我需要通过数据库将值传递给图形。我也编写了一个代码来检索该值。名称是：Test2.zul

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
 <window title="JDBC demo" border="normal">

 <zscript><![CDATA[

 import java.sql.*;

 String submit() {
     //load driver and get a database connetion
    // Class.forName("com.mysql.jdbc.Driver");
  //   Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3309/graphvalue","root","root");
   //  PreparedStatement stmt = null;
         Class.forName("com.mysql.jdbc.Driver");  
        Connection conn=DriverManager.getConnection("jdbc:mysql://localhost:3309/graphvalue","root","root");
        Statement stmt;
        ResultSet rs;
        String s1;
        int a,b,c,d;
     try {
        // stmt = conn.prepareStatement("select * from TestCase");
         //insert what end user entered into database table
        // stmt.setString(1, name.value);
        // stmt.setString(2, email.value);
        //stmt.getString(1, name.value);

         //execute the statement
     //  String abc =   stmt.executeUpdate();
     //    System.out.println(abc+ "  ");
         stmt=conn.createStatement();
         rs=stmt.executeQuery("select * from TestCase");
        while(rs.next())
            System.out.println(rs.getString(1)+"  "+rs.getInt(2)+"  "+rs.getInt(3)+" "+rs.getInt(4)+" "+rs.getInt(5));

        rs.first();
        s1=rs.getString(1);
      System.out.println(s1);
        // b=rs.getInt(2);
        conn.close();


     } finally { //cleanup

         if (stmt != null) {
             try {
                 stmt.close();
             } catch (SQLException ex) {
                 log.error(ex); //log and ignore
             }
         }
         if (conn != null) {
             try {
                 conn.close();
             } catch (SQLException ex) {
                 log.error(ex); //log and ignore
             }
         }
     }
     return s1;
 }
 ]]>

 </zscript>
 <vbox>
     <button label="submit" onClick="submit()"/>
 </vbox>
 1:${s1}; //To display the value of s1 (its not working)
 </window>
 </zk>

在这里，我想将 Test2.zul 中的值传递给 Test1.zul，并且应该通过从数据库（即 Test2.zul）中获取值来绘制图形。数据库值为：

ProjectName TotalTestCase TestCaseExecuted TestCaseFailed TestCaseNotExecuted Project1 50 30 8 20 Project2 20 10 2 10 Project3 55 25 12 30

请让我知道如何继续。谢谢

4

1 回答 1

0

您可以通过各种方式访问​​ zscript 中的组件，请参阅此处或此处的文档。

例如，您可以简单地通过其 id 引用组件，然后设置值，如下例所示：

<window id="win_1">   
    <zscript><![CDATA[  
        win_1.title="given by zscript";             
    ]]>
    </zscript>    
</window>

或者将 zscript 添加到组件并使用self：

<listbox>
  <zscript>self.getItems();</zscript><!-- self is listbox -->
  <listitem value="ab" label="${self.value}"/><!-- self is listitem -->
  <zscript>self.getSelectedIndex();</zscript><!-- self is listbox -->
</listbox>
于 2016-08-30T09:49:58.830 回答