HightCharts的简单使用

⦁ 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")

  $.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() {

        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>

  <!-- groovy -->
  <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"

 }
⦁ 拷贝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();// 关闭流

        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>