⦁ HighCharts
⦁ 简介
⦁ 快速入门
将资料中Highcharts目录下code目录中的所有资料拷贝到项目中
在页面中添加div标签
<div id="container"></div>
在入口函数中加载数据
$(function() {
$('#container')
.highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '2014 某网站各浏览器浏览量占比'
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) ||
'black'
}
}
}
},
series: [{
type: 'pie',
name: '浏览器访问量占比',
data: [
['Firefox', 45.0],
['IE', 26.8], {
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['其他', 0.7]
]
}]
});
});
⦁ 展示区域数据
⦁ 在页面导入资源
<script type="text/javascript" src="../../js/highcharts/highcharts.js"></script>
<script type="text/javascript"
src="../../js/highcharts/modules/exporting.js"></script>
<script type="text/javascript"
src="../../js/highcharts/highcharts-zh_CN.js"></script>
⦁ 在页面添加一个窗口
<div class="easyui-window" title="分区分布图" id="chartWindow"
collapsible="false" minimizable="false" maximizable="false"
style="top: 20px; left: 200px">
<div id="container"></div>
</div>
⦁ 在入口函数中隐藏窗口
$('#chartWindow').window({
width : 700,
modal : true,
shadow : true,
closed : true,
height : 600,
resizable : false
});
⦁ 添加一个菜单
{
id : 'button-export',
text : '导出图表',
iconCls : 'icon-undo',
handler : doExportCharts
}
⦁ 为菜单绑定事件
function doExportCharts() {
$("#chartWindow").window("open")
⦁ 简介
⦁ 快速入门
将资料中Highcharts目录下code目录中的所有资料拷贝到项目中
在页面中添加div标签
<div id="container"></div>
在入口函数中加载数据
$(function() {
$('#container')
.highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '2014 某网站各浏览器浏览量占比'
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) ||
'black'
}
}
}
},
series: [{
type: 'pie',
name: '浏览器访问量占比',
data: [
['Firefox', 45.0],
['IE', 26.8], {
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['其他', 0.7]
]
}]
});
});
⦁ 展示区域数据
⦁ 在页面导入资源
<script type="text/javascript" src="../../js/highcharts/highcharts.js"></script>
<script type="text/javascript"
src="../../js/highcharts/modules/exporting.js"></script>
<script type="text/javascript"
src="../../js/highcharts/highcharts-zh_CN.js"></script>
⦁ 在页面添加一个窗口
<div class="easyui-window" title="分区分布图" id="chartWindow"
collapsible="false" minimizable="false" maximizable="false"
style="top: 20px; left: 200px">
<div id="container"></div>
</div>
⦁ 在入口函数中隐藏窗口
$('#chartWindow').window({
width : 700,
modal : true,
shadow : true,
closed : true,
height : 600,
resizable : false
});
⦁ 添加一个菜单
{
id : 'button-export',
text : '导出图表',
iconCls : 'icon-undo',
handler : doExportCharts
}
⦁ 为菜单绑定事件
function doExportCharts() {
$("#chartWindow").window("open")
$.post("../../areaAction_getHighCharts.action",function(data){
$('#container').highcharts({
// 标题
title : {
text : '区域数据占比'
},// 数据
series : [ {
type : 'pie',
name : '区域数据占比',
data : data
} ]
});
})
}
⦁ 实现Action
// 生成Highcharts的数据
@Action("areaAction_getHighCharts")
public String getHighCharts() throws IOException {
List<Object[]> list = areaService.getHighCharts();
list2json(list, null);
return NONE;
}
⦁ 实现Service
@Override
public List<Object[]> getHighCharts() {
$('#container').highcharts({
// 标题
title : {
text : '区域数据占比'
},// 数据
series : [ {
type : 'pie',
name : '区域数据占比',
data : data
} ]
});
})
}
⦁ 实现Action
// 生成Highcharts的数据
@Action("areaAction_getHighCharts")
public String getHighCharts() throws IOException {
List<Object[]> list = areaService.getHighCharts();
list2json(list, null);
return NONE;
}
⦁ 实现Service
@Override
public List<Object[]> getHighCharts() {
return areaRepository.getHighCharts();
}
⦁ 实现DAO
@Query("select a.province,count(*) from Area a group by a.province")
List<Object[]> getHighCharts();
⦁ 使用iReport生成模版
修改jdk的设置(1.7以后版本的jdk需要进行设置)
进入软件的安装目录\Jaspersoft\iReport-5.6.0\etc\ ireport.conf
jdkhome="C:\Program Files\Java\jdk1.7.0_80"
启动软件
右键选中不需要的部分,选择删除
添加对中文的支持
配置数据源
添加数据库的驱动
⦁ 使用Jasper生成PDF
⦁ 引入坐标
<dependency>
<groupId>com.lowagie</groupId>
<artifactId>itext</artifactId>
<version>2.1.7</version>
</dependency>
<dependency>
<groupId>com.itextpdf</groupId>
<artifactId>itext-asian</artifactId>
<version>5.2.0</version>
</dependency>
}
⦁ 实现DAO
@Query("select a.province,count(*) from Area a group by a.province")
List<Object[]> getHighCharts();
⦁ 使用iReport生成模版
修改jdk的设置(1.7以后版本的jdk需要进行设置)
进入软件的安装目录\Jaspersoft\iReport-5.6.0\etc\ ireport.conf
jdkhome="C:\Program Files\Java\jdk1.7.0_80"
启动软件
右键选中不需要的部分,选择删除
添加对中文的支持
配置数据源
添加数据库的驱动
⦁ 使用Jasper生成PDF
⦁ 引入坐标
<dependency>
<groupId>com.lowagie</groupId>
<artifactId>itext</artifactId>
<version>2.1.7</version>
</dependency>
<dependency>
<groupId>com.itextpdf</groupId>
<artifactId>itext-asian</artifactId>
<version>5.2.0</version>
</dependency>
<!-- groovy -->
<dependency>
<groupId>org.codehaus.groovy</groupId>
<artifactId>groovy-all</artifactId>
<version>2.2.0</version>
</dependency>
<dependency>
<groupId>org.codehaus.groovy</groupId>
<artifactId>groovy-all</artifactId>
<version>2.2.0</version>
</dependency>
<!-- jasperreport -->
<dependency>
<groupId>net.sf.jasperreports</groupId>
<artifactId>jasperreports</artifactId>
<version>5.2.0</version>
<exclusions>
<exclusion>
<groupId>com.lowagie</groupId>
<artifactId>itext</artifactId>
</exclusion>
</exclusions>
</dependency>
⦁ 在页面添加按钮
{
id : 'button-export',
text : '导出PDF',
iconCls : 'icon-undo',
handler : doExportPDF
}
⦁ 实现点击事件
function doExportPDF() {
window.location.href = "../../areaAction_exportPDF.action"
<dependency>
<groupId>net.sf.jasperreports</groupId>
<artifactId>jasperreports</artifactId>
<version>5.2.0</version>
<exclusions>
<exclusion>
<groupId>com.lowagie</groupId>
<artifactId>itext</artifactId>
</exclusion>
</exclusions>
</dependency>
⦁ 在页面添加按钮
{
id : 'button-export',
text : '导出PDF',
iconCls : 'icon-undo',
handler : doExportPDF
}
⦁ 实现点击事件
function doExportPDF() {
window.location.href = "../../areaAction_exportPDF.action"
}
⦁ 拷贝iReport生成的模版到本项目
⦁ 实现Action
// 生成PDF的数据
@Action("areaAction_exportPDF")
public String exportPDF() throws Exception {
// 读取 jrxml 文件
String jrxml = ServletActionContext.getServletContext()
.getRealPath("/jasper/area.jrxml");
// 准备需要数据
Map<String, Object> parameters = new HashMap<String, Object>();
parameters.put("company", "黑马程序员");
// 准备需要数据
JasperReport report = JasperCompileManager.compileReport(jrxml);
JasperPrint jasperPrint = JasperFillManager.fillReport(report,
parameters, dataSource.getConnection());
⦁ 拷贝iReport生成的模版到本项目
⦁ 实现Action
// 生成PDF的数据
@Action("areaAction_exportPDF")
public String exportPDF() throws Exception {
// 读取 jrxml 文件
String jrxml = ServletActionContext.getServletContext()
.getRealPath("/jasper/area.jrxml");
// 准备需要数据
Map<String, Object> parameters = new HashMap<String, Object>();
parameters.put("company", "黑马程序员");
// 准备需要数据
JasperReport report = JasperCompileManager.compileReport(jrxml);
JasperPrint jasperPrint = JasperFillManager.fillReport(report,
parameters, dataSource.getConnection());
HttpServletResponse response = ServletActionContext.getResponse();
OutputStream ouputStream = response.getOutputStream();
// 设置相应参数,以附件形式保存PDF
response.setContentType("application/pdf");
response.setCharacterEncoding("UTF-8");
response.setHeader("Content-Disposition",
"attachment; filename=" + FileUtils
.encodeDownloadFilename("区域数据.pdf", ServletActionContext
.getRequest().getHeader("user-agent")));
// 使用JRPdfExproter导出器导出pdf
JRPdfExporter exporter = new JRPdfExporter();
exporter.setParameter(JRExporterParameter.JASPER_PRINT, jasperPrint);
exporter.setParameter(JRExporterParameter.OUTPUT_STREAM, ouputStream);
exporter.exportReport();// 导出
ouputStream.close();// 关闭流
OutputStream ouputStream = response.getOutputStream();
// 设置相应参数,以附件形式保存PDF
response.setContentType("application/pdf");
response.setCharacterEncoding("UTF-8");
response.setHeader("Content-Disposition",
"attachment; filename=" + FileUtils
.encodeDownloadFilename("区域数据.pdf", ServletActionContext
.getRequest().getHeader("user-agent")));
// 使用JRPdfExproter导出器导出pdf
JRPdfExporter exporter = new JRPdfExporter();
exporter.setParameter(JRExporterParameter.JASPER_PRINT, jasperPrint);
exporter.setParameter(JRExporterParameter.OUTPUT_STREAM, ouputStream);
exporter.exportReport();// 导出
ouputStream.close();// 关闭流
return NONE;
}
⦁ 解决找不到字体的异常
使用Maven命令手动部署资料中的iTextAsian.jar到本地仓库
mvn install:install-file -DgroupId=com.alpha -DartifactId=itextasian -Dversion=1.0.0 -Dpackaging=jar -Dfile=C:\Users\Alpha\Desktop\iTextAsian.jar
将common-parent工程中的itext-asian的坐标替换为新的坐标
旧坐标
<dependency>
<groupId>com.itextpdf</groupId>
<artifactId>itext-asian</artifactId>
<version>5.2.0</version>
</dependency>
新坐标
<dependency>
<groupId>com.alpha</groupId>
<artifactId>itextasian</artifactId>
<version>1.0.0</version>
</dependency>
}
⦁ 解决找不到字体的异常
使用Maven命令手动部署资料中的iTextAsian.jar到本地仓库
mvn install:install-file -DgroupId=com.alpha -DartifactId=itextasian -Dversion=1.0.0 -Dpackaging=jar -Dfile=C:\Users\Alpha\Desktop\iTextAsian.jar
将common-parent工程中的itext-asian的坐标替换为新的坐标
旧坐标
<dependency>
<groupId>com.itextpdf</groupId>
<artifactId>itext-asian</artifactId>
<version>5.2.0</version>
</dependency>
新坐标
<dependency>
<groupId>com.alpha</groupId>
<artifactId>itextasian</artifactId>
<version>1.0.0</version>
</dependency>