零基础highcharts生成报表-简单应用
来源:互联网 发布:java编码转换类 编辑:程序博客网 时间:2024/05/22 18:58
1.下载highcharts的js
http://pan.baidu.com/s/1o6NodRk
2.html引入js(用到了jquery.js)
<script type="text/javascript" src="../js/jquery.js"></script><script type="text/javascript" src="../js/highcharts.js"></script>3.后台构造数据构造对象有三种数据格式:
data: Array<Object|Array|Number>
- An array of numerical values. In this case, the numerical values will be interpreted as y values, and x values will be automatically calculated, either starting at 0 and incrementing by 1, or from
pointStart
andpointInterval
given in the plotOptions. If the axis is has categories, these will be used. This option is not available for range series. Example:data: [0, 5, 3, 5]
An array of arrays with two values. In this case, the first value is the x value and the second is the y value. If the first value is a string, it is applied as the name of the point, and the x value is incremented following the above rules.
For range series, the arrays will be interpreted as
Example:[x, low, high]
. In this cases, the X value can be skipped altogether to make use ofpointStart
andpointRange
.data: [[5, 2], [6, 3], [8, 2]]
An array of objects with named values. In this case the objects are point configuration objects as seen below.
Range series values are given by
Example:low
andhigh
.data: [{name: 'Point 1',color: '#00FF00',y: 0}, {name: 'Point 2',color: '#FF00FF',y: 5}]
笔者以第二种和第三种为例,创建对应的实体数据对象
第二种:SimpleSeries.java
public class SimpleSeries {// The name of the series as shown in the legend, tooltip etc.String name ;// An array of arrays with two values. In this case, the first value is the x value and the second is the y value. If the first value is a string, it is applied as the name of the point, and the x value is incremented following the above rulesList<Object[]> data;public SimpleSeries(String name, List<Object[]> data) {this.name = name;this.data = data;}public SimpleSeries() {}public String getName() {return name;}public void setName(String name) {this.name = name;}public List<Object[]> getData() {return data;}public void setData(List<Object[]> data) {this.data = data;}@Overridepublic String toString() {//[{name:'人数',data:[['男',96.0],['女',29.0]]}] //横坐标 categories: ["男", "女"]String result = "{name:'"+name+"',data:[";String eachStr = "";for (int i = 0; i < data.size(); i++) {Object[] objArray = data.get(i);if(i == data.size() -1)eachStr += "['"+objArray[0]+"', "+objArray[1]+"]";else eachStr += "['"+objArray[0]+"', "+objArray[1]+"],";}result +=eachStr;result +="]}";return result;}}
第二种:ComplexSeries.java
public class ComplexSeries {// The name of the series as shown in the legend, tooltip etc.String name ;// An array of numerical values. In this case, the numerical values will be interpreted as y values, and x values will be automatically calculated, either starting at 0 and incrementing by 1, or from pointStart and pointInterval given in the plotOptions. If the axis is has categories, these will be used. This option is not available for range seriesList<Double> data;public ComplexSeries(String name, List<Double> data) {this.name = name;this.data = data;}public ComplexSeries() {}public String getName() {return name;}public void setName(String name) {this.name = name;}public List<Double> getData() {return data;}public void setData(List<Double> data) {this.data = data;}@Overridepublic String toString() {//[{name:'男',data:[17.0,1.0,24.0,5.0,5.0,22.0,1.0,7.0,5.0,4.0,5.0]},{name:'女',data:[2.0,0.0,8.0,2.0,2.0,8.0,0.0,0.0,2.0,2.0,3.0]}]"] // 横轴 categories: ["亚历山大", "直销部", "人力资源部", 8 更多...]String result = "{name:'"+name+"',data:[";String eachStr = "";for (int i = 0; i < data.size(); i++) {double d = data.get(i);if(i == data.size() -1)eachStr += d;else eachStr += d+",";}result +=eachStr;result +="]}";return result;}}
构造完对象后,输出到
chartBean.setColumnData(simpleList.toString());// 设置简单柱状图数据 chartBean.setMoreColumnData(complexList.toString()); // 设置复杂柱状图ps:柱状图和曲线图所需数据相同,比如我需要的数据为
// 前台构造数据测试 // 1.单柱状图、单折线图 // var data = "[{name:'人数',data:[['男',96.0],['女',29.0]]}]"; // categories: ["男", "女"] // 2.饼图 // var data = "[{name:'人数',data:[['男',96.0],['女',29.0]]}]"; // 3.复杂部门柱状图、折线图 // var data = "[{name:'男',data:[17.0,1.0,24.0,5.0,5.0,22.0,1.0,7.0,5.0,4.0,5.0]},{name:'女',data:[2.0,0.0,8.0,2.0,2.0,8.0,0.0,0.0,2.0,2.0,3.0]}]"; // categories: ["亚历山大", "直销部", "人力资源部", 8 更多...] // 4.复杂类别柱状图、折线图 // var data = "[{name:'亚历山大',data:[17.0,2.0]},{name:'直销部',data:[1.0,0.0]},{name:'人力资源部',data:[24.0,8.0]}]"// categories: ["男", "女"]
4.前台显示调用js
// 简单柱状、饼图、单折线图显示公共函数function reportChart(divId, data , type, categories, min , max){console.log("157="+divId+","+data+","+type+","+categories+","+min+","+max);var series = eval(data);if("" == data) return ;// 无数据显示时,返回if("column" == type || "line" == type){// 单柱状图 和曲线图$('#'+divId).highcharts({ chart: { type: type, }, title: { text: titleText }, xAxis: { title: { text: '' }, categories: categories }, yAxis: { title: { text: '' }, min: min, max:max, }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, legend: { layout: 'vertical', align: 'left', verticalAlign: 'top', x: 50, y: 20, floating: true, backgroundColor: '#FFFFFF', borderWidth: 1 }, series: series});}else if("pie" == type){ // 饼图 $('#'+divId).highcharts({ chart: { type: type, }, title: { text: titleText }, 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: series});}}
ps:附上生成图结果
- 零基础highcharts生成报表-简单应用
- JS报表控件highcharts应用
- JS报表控件highcharts应用
- highcharts报表
- Highcharts axja 获取json对象动态生成报表生成
- Highcharts ajax获取json对象动态生成报表生成 .
- FusionCharts生成报表应用
- JERT简单报表生成
- highcharts 高级应用(生成动态曲线)
- 零基础跑spark应用
- jasperreport生成简单的报表
- 利用POI生成简单报表
- Highcharts报表之柱状图
- HighCharts制作报表
- highCharts图形报表神器
- 报表工具 js Highcharts
- 图形报表,HighCharts
- Highcharts前端报表
- LeetCode @ 3Sum D3F5
- PL/SQL database character set(AL32UTF8) and Client character set(ZHS16GBK) are different
- JavaWeb方向面试必备知识
- 反射机制学习3(反射调用方法)
- java文件操作之移动文件到指定的目录
- 零基础highcharts生成报表-简单应用
- fopencookie函数详解
- cenos安装配置owncloud过程
- 继承自HttpServlet的实现中,doGet和doPost方法都是protected域的
- 利用Attribute标记方法的调用权限
- Apache Mahout:适合所有人的可扩展机器学习框架
- N皇后问题c语言解法
- 【总结】 后缀数组
- POJ 1028 Web Navigation