highcharts和dwr实现从数据库拿数据绘图

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

最近接触了一下highcharts和dwr，所以记一下，俗话说好记性不如烂博客么~下面会附上我在学习过程中，找到的大神的文章。

dwr学习材料：http://blog.youkuaiyun.com/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为后台得到的数据）。（当然饼图是木有横轴属性的）