我编写了以下代码来绘制图表。名称是: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)获取值来绘制图表。 数据库值为:
项目名称 TotalTestCase TestCaseExecuted TestCaseFailed TestCaseNotExecuted
项目1 50 30 8 20
项目2 20 10 2 10
项目3 55 25 12 30
请让我知道如何继续。谢谢
最佳答案
您可以通过多种方式访问zscript中的组件，请参阅文档here或here .
例如，您可以简单地通过组件的 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>
关于javascript - 如何将变量从 zscript 传递到 javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39221450/