2014-10-26 2 views
1

При щелчке по кнопке на странице я хочу отобразить гистограмму. Я могу отобразить гистограмму, но график открывается в новом окне, но я хотите отобразить его на одной странице.Как отобразить диаграмму на той же странице в struts2 + jfreechart

Я нажав на следующие кнопки на 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> 

и JfreeChartAcction выглядит следующим образом:

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, а не в новом окне.

Заранее спасибо.

+0

Есть ли какие-либо ограничения на использование тега формы вместо s: submit of struts? – SMA

+0

Спасибо Алмас за ваш ответ. У меня есть тег формы также на моем transactionData.jsp. Однако, поскольку мне нужно было вызвать два разных метода одного и того же класса действий при щелчке двумя кнопками, я использовал s: submit в указанном выше порядке. – user2603985

+0

Если вы используете два разных метода, вы должны увидеть http://stackoverflow.com/a/23415759/573032 –

ответ

0

Вы можете использовать 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 с параметрами ...

Они являются два наиболее используемых способа.

+0

Спасибо Андреа за ваш ответ. Я никогда не использовал Ajax раньше. Не могли бы вы сообщить мне, если в моем случае необходим код в самом деле, поскольку метод execute не имеет никаких параметров для принятия: data: {param1: $ (" # param1 "). val(), param2: $ (" # param2 "). val(), paramN: $ (" # paramN "). val() }, – user2603985

+0

Это только примерные параметры, если вы нужно отправить что-то в действие. Если вам не нужно ничего отправлять, просто удалите часть данных (и измените POST на GET) –

+0

Спасибо Andrea.I удалил код Jsp в исходном посте с кодом, которым вы поделились. К сожалению, он не работает для меня. Возможно пожалуйста, предложите, если я что-то делаю неправильно. – user2603985

Смежные вопросы