zoukankan      html  css  js  c++  java
  • 初识Highcharts

      在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- 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)点击导出图标,选择要导出的类型就可以了

      

  • 相关阅读:
    UVALive 6909 Kevin's Problem 数学排列组合
    UVALive 6908 Electric Bike dp
    UVALive 6907 Body Building tarjan
    UVALive 6906 Cluster Analysis 并查集
    八月微博
    hdu 5784 How Many Triangles 计算几何,平面有多少个锐角三角形
    hdu 5792 World is Exploding 树状数组
    hdu 5791 Two dp
    hdu 5787 K-wolf Number 数位dp
    hdu 5783 Divide the Sequence 贪心
  • 原文地址:https://www.cnblogs.com/luxh/p/2752091.html
Copyright © 2011-2022 走看看