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

来源：互联网发布：js 事件对象event 编辑：程序博客网时间：2024/05/16 11:20

<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为后台得到的数据）。（当然饼图是木有横轴属性的）

0 0