单击页面上的按钮，我想显示条形图。我可以显示条形图，但图表正在一个新窗口中打开，但我想在同一页上显示它。
我点击transactionData.jsp上的以下按钮来显示图表：
在transactionData.jsp中：修改：
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
$(function(){
$("#submitButton").click(function(e){
e.preventDefault();
$.ajax({type: "GET",
url: "<s:url action='displayChartAction'/>",
success:function(result){
$("#chartOutput").html(result);
}
});
});
});
</script>
<s:head theme="ajax" debug="true"/>
<title>Hello World</title>
</head>
<body bgcolor="grey">
<s:form>
<s:datetimepicker label="Select From" name="transactionBean.fromDate" displayFormat="dd-MM-yy" required="true" />
<s:datetimepicker label="Select To" name="transactionBean.toDate" displayFormat="dd-MM-yy" required="true" />
<s:optiontransferselect
label="Channels"
name="transactionBean.leftChannels"
leftTitle="Unselected Channels"
rightTitle="Selected Channels"
list="transactionBean.leftChannelsList"
multiple="true"
headerKey="-1"
doubleList="transactionBean.rightChannelsList"
doubleName="transactionBean.rightChannels"
doubleHeaderKey="-1"
doubleHeaderValue="Selected Values"
/>
<!-- Transaction Types -->
<s:optiontransferselect
label="transaction Types"
name="transactionBean.leftTransTypes"
leftTitle="Unselected Transaction Type"
rightTitle="Selected Transaction Type"
list="transactionBean.leftTransTypesList"
multiple="true"
headerKey="-1"
doubleList="transactionBean.rightTransTypesList"
doubleName="transactionBean.rightTransTypes"
doubleHeaderKey="-1"
doubleHeaderValue="Selected Values"
/>
<!-- Bics -->
<s:optiontransferselect
label="Bics"
name="transactionBean.leftBics"
leftTitle="Unselected Bics"
rightTitle="Selected Bics"
list="transactionBean.leftBicsList"
multiple="true"
headerKey="-1"
doubleList="transactionBean.rightBicList"
doubleName="transactionBean.rightBics"
doubleHeaderKey="-1"
doubleHeaderValue="Selected Values"
/>
<div id="chartOutput">
</div>
<h3>All Records:</h3>
<table border="true">
<s:iterator value="listTransBean">
<tr>
<td>
<s:property value="dateTime"/><br/>
</td>
<td>
<s:property value="channel"/><br/>
</td>
<td>
<s:property value="transactionType"/><br/>
</td>
<td>
<s:property value="bic"/><br/>
</td>
<td>
<s:property value="volume"/><br/>
</td>
</tr>
</s:iterator>
</table>
<s:submit id="submitButton" value="Show Chart" align="center" />
<s:submit value="Fetch Data" align="center" action="displayDataAction" />
</s:form>
</body>
</html>
displayChartAction映射在struts.xml中，类似于：
<action name="displayChartAction"
class="com.tutorialspoint.struts2.jFreeChartAction"
method="execute">
<result name="success" type="chart">
<param name="value">chart</param>
<param name="type">jpeg</param>
<param name="width">600</param>
<param name="height">400</param>
</result>
</action>
JfreeChartAction如下：
public class JfreeChartAction extends ActionSupport {
private JFreeChart chart;
private TransactionBean transactionBean;
private TransactionDao transactionDao;
private List<TransactionBean> listTransBean;
public List<TransactionBean> getListTransBean() {
return listTransBean;
}
public void setListTransBean(List<TransactionBean> listTransBean) {
if(listTransBean == null){
listTransBean = new ArrayList<TransactionBean>();
}
this.listTransBean = listTransBean;
}
public TransactionDao getTransactionDao() {
return transactionDao;
}
public void setTransactionDao(TransactionDao transactionDao) {
this.transactionDao = transactionDao;
}
public TransactionBean getTransactionBean() {
if(transactionBean==null){
transactionBean = new TransactionBean();
}
return transactionBean;
}
public void setTransactionBean(TransactionBean transactionBean) {
this.transactionBean = transactionBean;
}
// This method will get called if we specify <param name="value">chart</param>
public JFreeChart getChart() {
return chart;
}
public void setChart(JFreeChart chart) {
this.chart = chart;
}
public String execute() throws Exception {
System.out.println("Inside Execute: Start");
System.out.println("From date:"+getTransactionBean().getFromDate());
System.out.println("From date:"+getTransactionBean().getToDate());
System.out.println("leftChannels:"+getTransactionBean().getLeftChannels());
System.out.println("RightChannels:"+getTransactionBean().getRightChannels());
System.out.println("leftChannelsList:"+getTransactionBean().getLeftChannelsList());
System.out.println("rightChannelsList"+getTransactionBean().getRightChannelsList());
System.out.println("Left Trans type List"+getTransactionBean().getLeftTransTypesList());
System.out.println("Right Trans type List"+getTransactionBean().getRightTransTypesList());
System.out.println("Right Trans Type"+getTransactionBean().getRightTransTypes());
System.out.println("Left Bic List"+getTransactionBean().getLeftBicsList());
System.out.println("Right Bic List"+getTransactionBean().getRightBicList());
System.out.println("Right Bics"+getTransactionBean().getRightBics());
System.out.println("Inside Execute: End");
List<TransactionBean> list = transactionDao.fetchChartData(getTransactionBean());
System.out.println("List Size:"+list.size());
Iterator<TransactionBean> itr = list.iterator();
DefaultCategoryDataset dataSet = new DefaultCategoryDataset();
while(itr.hasNext()){
TransactionBean transBean = (TransactionBean)itr.next();
System.out.println("Volume:"+transBean.getVolume());
System.out.println("Date Time:"+transBean.getDateTime().toString());
System.out.println("Channel:"+transBean.getChannel());
dataSet.setValue(transBean.getVolume(),transBean.getDateTime(),"Channel");
}
chart = ChartFactory.createBarChart(
"Bar Chart", //Chart title
"", //Domain axis label
"TRANSACTIONS", //Range axis label
dataSet, //Chart Data
PlotOrientation.VERTICAL, // orientation
true, // include legend?
true, // include tooltips?
false // include URLs?
);
chart.setBorderVisible(true);
System.out.println("Execute Ends");
return SUCCESS;
}
public String display(){
System.out.println("Inside display");
List<String> leftChannelsList = null;
leftChannelsList = transactionDao.fetchChannels();
setTransactionBean(new TransactionBean());
getTransactionBean().setLeftChannelsList(leftChannelsList);
List<String> leftTransTypesList = null;
leftTransTypesList = transactionDao.fetchTransactionTypes();
getTransactionBean().setLeftTransTypesList(leftTransTypesList);
List<String> leftBicsList = null;
leftBicsList = transactionDao.fetchBics();
getTransactionBean().setLeftBicsList(leftBicsList);
return SUCCESS;
}
public JfreeChartAction(){
System.out.println("Inside Constructor");
}
public String fetchTransactionsData(){
System.out.println("Inside Fetch Transaction Data");
List<TransactionBean> list = transactionDao.fetchTransactionsData(getTransactionBean());
setListTransBean(list);
return SUCCESS;
}
}
有人能建议我如何在同一页面上显示条形图吗，即在transactionData.jsp本身上，而不是在新窗口中。
提前谢谢。
您可以使用AJAX。jQuery的一个例子：
<script>
$(function(){
$("#submitButton").click(function(e){
e.preventDefault();
$.ajax({type: "POST",
url: "<s:url action='displayChartAction'/>",
data: {
transactionBean.fromDate : $('[name="transactionBean.fromDate"]').val(),
transactionBean.toDate : $('[name="transactionBean.toDate"]').val()
},
success:function(result){
$("#chartOutput").html(result);
}
});
});
</script>
<input type="button" id="submitButton" value="Show Chart" />
<div id="chartOutput">
Click the button to load the chart here
</div>
或者，您可以执行GET并将结果加载到页面上的IFrame中，方法是将其src属性更改为带参数的URL。。。
这是最常用的两种方式。