| 组件 | highcharts组件 | |||||
| 功能说明 | 基于jQuery图形报表控件，其特点如下： 1、可以以柱状图、饼状图、曲线图等形式展示报表数据； 2、通过json的形式进行数据交换 |
|||||
| 使用说明 | 1.引入如下js 如果没有引入以下js，那么需要引入以下js： <script type=”text/javascript” src=”/js/highcharts/highcharts_wev8.js”></script> <script type=”text/javascript” src=”/js/highcharts/modules/no-data-to-display_wev8.js”></script> |
|||||
| 2、页面指定一个显示区域 <div id=”ContainerDiv” style=”margin: 5 auto;margin-top:10px; min-width: 400px; height: 500px;”></div> 3、当页面加载完成后，在页面上调用如下方法 jQuery(document).ready(function(){ $(‘#ContainerDiv’).highcharts({ chart: { type: ‘column’, //图表的类型,默认是line //borderColor: ‘#DADADA’, //边框颜色 borderWidth:0 //如果不要图表边框,可以置成0 }, title: { //一级标题 text: ‘标题名称’, style: { //标题样式 color: ‘#000000′, fontSize: ’24px’ } }, subtitle: {//二级标题,如果不需要,此项可以删除 text: ”, align: ‘center’, style: { color: ‘#4d759e’ } }, tooltip:{ //鼠标放在数据点的显示信息 headerFormat: ‘<span style=”font-size: 10px”>{point.key}</span>’, pointFormat: ‘<span style=”color:{series.color}”>{series.name}</span>: <b>{point.y}</b><br/>’ }, xAxis: { //设置x轴信息 categories: [‘ ‘] //设置x轴的标题 }, yAxis: { //设置y轴的信息 min: 0, title: { text: ‘ ‘ }, allowDecimals:false //y轴是否允许小数,默认是true }, credits: { enabled: false //去除图表右下角的链接 }, series: [ {name: ‘<%=SystemEnv.getHtmlLabelName(1979,user.getLanguage())%>’,data: jsonData.nList}, //未开始 {name: ‘<%=SystemEnv.getHtmlLabelName(32556,user.getLanguage())%>’,data: jsonData.dList},//已延期 {name: ‘<%=SystemEnv.getHtmlLabelName(1960,user.getLanguage())%>’,data: jsonData.iList},//进行中 {name: ‘<%=SystemEnv.getHtmlLabelName(1961,user.getLanguage())%>’,data: jsonData.fList}//已完成 ], //构造图形所要的json数据格式 colors:[‘#4F81BD’,’#C0504D’,’#9BBB59′,’#8064A2′],//指定颜色 plotOptions: { //针对不通类型的图表指定特有的属性值 column: { pointPadding: 0.2, borderWidth: 0 } }, lang: { noData: ” 没有数据” //没有数据时显示的内容 } }); }); |
||||||
| 例子 |
|
|||||
| API | http://www.hcharts.cn/api/index.php | |||||
| Demo | http://www.hcharts.cn/demo/index.php |
|||||
| 图形涉及的东西太多,文档无法全部指出,如果使用过程中有问题,可以找黄冠冠一起交流讨论 | ||||||
转载请注明：赫非域 » ecology开发之highcharts组件