highcharts和dwr實現從數據庫拿數據繪圖

<script src='<%=request.getContextPath()%>/dwr/interface/riskMonitorDao.js' type="text/javascript"></script>

最近接觸了一下highcharts和dwr，所以記一下，俗話說好記性不如爛博客麼~下面會附上我在學習過程中，找到的大神的文章。

dwr學習材料：http://blog.csdn.net/chenghui0317/article/details/9842873

後臺java類與jsp文件通過一個dwr的配置文件進行關聯

（1）後臺新建一個類用來獲得所要的信息，這裏就用項目裏的代碼做例子：

public class RiskMonitorDwrFunction {
	
	public List<TblOffdRule> getRuleOffdInfo(){
		return RiskMonitorService.getInstance().getOffdRuleList(null, null);
	}
}

（2）在dwr.xml中配置相關信息

<create creator="new" javascript="riskMonitorDao">
		<param name="class" value="com.huateng.erm.riskMoitor.service.RiskMonitorDwrFunction" />
</create>
<convert converter="bean" match="com.huateng.erm.bean.TblOffdRule"></convert> 

在create標籤內的javascript=“riskMonitorDao”是說明dwr自動生成的js文件的文件名。param則是對應後臺java類

在convert標籤內寫明要傳遞回去的數據的bean。例如之前函數返回TblOffdRule的LIst，這裏就要包含TblOffdRule的位置

（3）在jsp文件中導入自動生成的js文件

<script src='<%=request.getContextPath()%>/dwr/interface/riskMonitorDao.js' type="text/javascript"></script>

在js調用riskMonitorDao的方法就可以了

riskMonitorDao.getRuleOffdInfo(function(data){
	do somethting......
	});

data屬性即爲獲得的list鏈表，通過類似[data[i].offdRuleId方法就能獲取相應的屬性值

小結：dwr其實就是通過一個配置文件來關聯前端和後端的。當需要傳遞參數到後臺時，在js中調用函數時可以這樣：

dao.getField(A,B,function(data){

       do somethting......

});

其中，A，B分別對應後臺函數中的第一個，第二個參數

恩，說完dwr就要說highcharts了。highcharts學習的話，有個highcharts中文網就很棒（另外highcharts繪製圖標太酷炫了！）

highcharts學習材料：http://www.hcharts.cn/index.php（美中不足的是他的中文教程還沒弄完全！！！不過在線演示已經很棒了！）

（1）首先，來來來，畫個餅圖

var mychart={
        
        chart: {
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        credits:{
            enabled:false
        },
        title: {
            text: '規則觸發情況圖表'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share'
        }]
    };

（2）然後通過一個函數來填充必要的數據就OK了

function showChart(){
    riskMonitorDao.getRuleOffdInfo(function(data){
        var mydata=[];
        for(var i=0;i<data.length;i++){
          mydata.push([data[i].offdRuleId,data[i].ruleIdCount]);
        }
        
        mychart.series[0].data = mydata;

        new Highcharts.Chart(mychart);
    });
}

（3）最後在看情況調用他吧，我是在文檔加載的時候就讓他顯示的

$(document).ready(function(){
    showChart();
});

小結：中文網上有各種各樣的圖形，想換圖形的話可以通過參看上面的代碼。細節的話，可以看他的api文檔。其實highcharts的信息都是通過json格式保存的，比如我想改變橫軸可以這樣做，可以用自己的數據初始化他的categories屬性。例如mychart.xAxis.categories=xAxisdata;（xAxisdata爲後臺得到的數據）。（當然餅圖是木有橫軸屬性的）