北在北方

太白枝头看，花开不计年，杯中浮日月，楼外是青天。

导航

初识Highcharts

Posted on 2012-11-03 11:29  CN.programmer.Luxh  阅读(1820)  评论(0)  编辑  收藏  举报

　　在Java平台中绘制图表，以前很多人应该都会用JfreeChart，但是JfreeChart使用起来比较麻烦。

　　Highcharts是使用纯JavaScript编写的图表绘制类库，不需要任何的Java或者Flash插件，可以简单快捷的在web应用中绘制交互性图表，界面美观，支持线状、柱状、饼状等多种图表类型。

　　Highcharts还支持将图表导出为PNG、JPEG、PDF等类型。

　　官网：http://www.highcharts.com/

　　看一个官方例子：

　　界面非常的好看，而且在主流浏览器中都有非常好的兼容性。

　　1、在官网下载Highcharts，然后再下载一个jquery的类库。

　　2、我这里使用JSP来展现，基本的使用只需要引入jquery.js和highcharts.js即可。

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.2.min.js"></script>
        <script src="${pageContext.request.contextPath}/js/highcharts.js"></script>
        <!-- <script src="${pageContext.request.contextPath}/js/modules/exporting.js"></script> --><!--导出功能使用-->
        <script type="text/javascript">
            $(function () {
                var chart;
                $(document).ready(function() {
                    chart = new Highcharts.Chart({
                        //常规图表选项设置
                        chart: {
                            renderTo: 'container',        //在哪个区域呈现，对应HTML中的一个元素ID
                            plotBackgroundColor: null,    //绘图区的背景颜色
                            plotBorderWidth: null,        //绘图区边框宽度
                            plotShadow: false            //绘图区是否显示阴影            
                        },
                        
                        //图表的主标题
                        title: {
                            text: '2012年上半年中国笔记本电脑市场品牌关注比例分布'
                        },
                        //当鼠标经过时的提示设置
                        tooltip: {
                            pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                            percentageDecimals: 1
                        },
                        //每种图表类型属性设置
                        plotOptions: {
                            //饼状图
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: true,
                                    color: '#000000',
                                    connectorColor: '#000000',
                                    formatter: function() {
                                        return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                                    }
                                }
                            }
                        },
                           //图表要展现的数据
                        series: [{
                            type: 'pie',
                            name: '市场关注度',
                            data: [
                                ['宏碁',7.6],
                                ['惠普',12.1],
                                   ['华硕',13.7],
                                ['联想',31.4],
                                ['清华同方',3.3],
                                ['三星',3.3],
                                ['索尼',4.3],
                                ['东芝',4.8],
                                ['神舟',6.9],
                                ['戴尔',7.2],
                                ['其他',5.4]
                            ]
                        }]
                    });
                });
                
            });
        </script>
    </head>
    <body>
    
    <!--  图表的呈现区域，和常规图表选项设置中的renderTo: 'container'对应-->
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

    </body>
</html>

　　3、运行结果：

　　4、加上导出图表功能

　　　　要使用导出功能，还需要引入exporting.js。

　　　　引入后，图表右上方会有两个图标，一个是打印，一个是导出。

　　因为是在本地服务器，所以我们需要把打印功能的实现应用放到本地服务器。

　　在Highcharts下载包解压后的\Highcharts-2.3.3\exporting-server\java目录先提供了Java实现的导出应用。这个应用是用maven构建的，所以我们需要使用maven把它打包。

　　　　1）安装maven，配置环境变量，不多说。

　　　　2）在命令行进入到\Highcharts-2.3.3\exporting-server\java\highcharts-export目录，执行mvn clean package ，然后maven就会把应用打包。最后在\Highcharts-2.3.3\exporting-server\java\highcharts-export\目录下会生成一个target目录，target目录中就会有highcharts-export.war，把highcharts-export.war复制到我们的应用服务器发布即可。

　　　　3）把导出的链接接修改为本地应用的链接

　　　　　在exporting.js中搜索　exporting={type:"image/png",url:"http://export.highcharts.com/" ，

　　　　　然后把url改成自己刚发布的：exporting={type:"image/png",url:"http://localhost:8080/highcharts-export"

 　　　 4）点击导出图标，选择要导出的类型就可以了