1

ページ上のボタンをクリックすると、棒グラフを表示したい棒グラフは表示できますが、グラフは別ウィンドウで開きますが、同じページに表示したいです。

チャートを表示するには、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 自体に棒グラフを表示する方法を提案できますか。

前もって感謝します。

4

1 に答える 1

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 を実行して、その src 属性をパラメータ付きの URL に変更することにより、ページの IFrame に結果をロードすることもできます...

これらは、最もよく使用される 2 つの方法です。

于 2014-10-27T10:02:22.657 に答える