进一步封装highchart,打造自己的图表插件:jHighChart.js

Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表。支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。但是参考官网的实例,我发现如果在项目中频繁使用highchart,按照它的方式还是挺复杂的,我这里所谓的复杂并不是难而是麻烦,因为你每写一个图表你就必须重新写类似于下面结构的javascript代码:

$('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });

所以如果在项目中使用必定是非常繁琐的,很有必要对highchart进一步封装。封装说的简单点就是找出共通点。多看几个highchart的图表源码就会发现,他们无非就是这么几个:标题(title、subTitle)、X轴(xAxis)、Y轴(yAxis)、图例(legend)、数据点选项(plotOptions)、数据项(series),所以我们只需要对这些个元素进行处理即可。首先先看看我封装的结果:

var jhc = new $.jHighChart({
                renderTo: $("#numberCardChart"),
                chart:{chartBgColor:"#FBFCFD"},
                chartType: "column",
                title: "商户会员统计",
                subtitle: "2014-2015会员统计",
                xAxisName: "时间",
                xCategories:responseData.categories,
                yAxisSetting: [{ key: "numbers",name:"会员数" ,oppositeOption: false}],
                yAxisColumn: [{ key: "numbers",name:"会员数"}],
                series: responseData.series,
                legend:{"enabled":false},
                click: function (params) {
                    queryNumberDetail(params);
                }
        });
    jhc.create();

renderTo为展示的DIV ID,chart为图表的设置、chartType图表的展示类型、title主标题、subtitle副标题、xAxisName X轴名称、xCategoriesX轴数据、yAxisSetting Y轴设置、series数据项。

整个highchart的配置option如下:

var options = $.extend({
          //背景颜色
              chart:{chartBgColor:'#FFFFFF',width:"",height:""},
              //需要展示的位置(哪个DOM元素内)
              renderTo: $(document.body),
              //图表类型:bar,line,spline,column,pie,area,areaspline,combine,bubble,scatter
              chartType: "",
              //图表大标题
              title: "",
              //图表小标题
              subtitle: "",
              //X轴名称
              xAxisName: "",
              //X轴列表数据,是一个JSON的LIST对象
              xCategories:{},
              //Y轴设置,可添加多条Y轴, key-Y轴名称,oppositeOption-true/false(true为right, false为left)
              yAxisSetting: [{ key: "",name:"" ,oppositeOption: false}],
              //key-Y轴对应数据,nane-名称,chartType-图形类型,yIndex-每个指标集需要对应的具体Y轴索引
              yAxisColumn: [{ key: "",name:"",chartType: "", yIndex: 0, color: null}],
              //图表数据源,是一个JSON的LIST对象
              series: {},
              //Point MouseOver事件
              mouseOver: function () { },
              //Point mouseOut事件
              mouseOut: function () { },
              //Point click事件:出发下钻方法
              click: function () { },
              //是否开启导出按钮
              exportButton: true,
              //图标容器大小
              containerSize:{width:null,height:null},
              //图例选项:默认不显示:具体的配置请参看API
              legend:{enabled:false,layout:"",align:"",verticalAlign:"",floating:false,x:"",y:"",backgroundColor:"#FFFFFF"},
              //数据点选项
              //showInLegend:是否显示饼图图例,dataEnable:是否显示饼图数据点
              plotOptions:{showInLegend:false,dataEnable:false},
              //基本参数设置:主要用于设置图表高度、宽度
              chart:{width:"",height:""}

          }, setting);

上面是对javascript部分进行处理,封装。但是我们的数据时通过后台来的,怎么才能将后台数据封装到该插件中去呢?可能心细的博友发现了,在上面的使用方法中注意到了这两个地方:xCategories:responseData.categories、series: responseData.series,responseData为后台的返回数据,categories为X轴数据,series为数据项。在后台我是这样处理的:

进一步封装highchart,打造自己的图表插件:jHighChart.js

上面UML是实现后台数据的结构图、其中BuildChartsService为顶层抽象类,向外暴露buildCharts方法,实现图表的子类需要实现createXAxisCategories、createSeries两个方法。ChartBaseAction为构建图表的基础Action,通过Ajax请求,它的主要功能是提供基本的统计数据valueStack,并对数据项进行封装处理。SeriesChartVO、SeriesDatasVO两个类为图表统计数据项的支撑类,其中SeriesChartVO为统计图表数据选项VO,一个seriesChartVO对应一条记录,jHightChart内部实现使用yAxisColumn的key与seriesChartVO的kye进行一一对应。SeriesDatasVO为统计图表数,统计内部数据表现形式为:data:[{name:'',y:'',drilldown:'',params:''}],该类主要是用户数据项的构建和配置,例如配置下钻数据参数等等。

实例

请求Action继承构建图表ChartBaseAction:

public class QueryDailyStatisticsInfoAction extends ChartBaseAction{

    private static final long serialVersionUID = 6822826781517049491L;
    
    @Resource
    private IHistoryStatisticsDailyTransService historyStatisticsDailyTransService;

    @SuppressWarnings("unchecked")
    @Override
    public String execute() throws Exception {
        List<JSON> list = (List<JSON>) getRequest().getSession().getAttribute("dailyList");
        
        valueStack = historyStatisticsDailyTransService.getdailyStatisticsInfo(list);
        
        getRequest().getSession().removeAttribute("dailyList");
        
        return SUCCESS;
    }
}

该Action通过service的getdailyStatisticsInfo方法来获取数据,然后构建基本的图表数据参数Map

private Map<String, Object> buildDailyStatisticsInfo(List<String> categories,
            List<JSON> list) throws ServiceException{
        Map<String, Object> categoriesMap = new HashMap<String, Object>();
        categoriesMap.put("list", categories);
        
        Map<String, Object> seriesMap = new HashMap<String, Object>();
        seriesMap.put("seriesList", list);
        
        Map<String, Object> contentMap = new HashMap<String, Object>();
        //X轴数据项
        contentMap.put("categories", categoriesMap);
        //数据项
        contentMap.put("series", seriesMap);
        
        BuildChartsService service = new DailyStatisticsInfoChart();
        return service.buildCharts(contentMap);
    }

最后使用DailyStatisticsInfoChart的buildChart方法来实现图表数据构建

public class DailyStatisticsInfoChart extends BuildChartsService{

    @SuppressWarnings("unchecked")
    protected List<String> createXAxisCategories(Map<String,Object> xAxisMap) {
        List<String> categories = (List<String>) xAxisMap.get("list");
        return categories;
    }

    @Override
    @SuppressWarnings("unchecked")
    protected List<SeriesChartVO> createSeries(Map<String,Object> contentMap)
            throws ServiceException {
        List<JSON> jsons = (List<JSON>) contentMap.get("seriesList");
        
        List<SeriesDatasVO> dataList = new ArrayList<SeriesDatasVO>();
        SeriesDatasVO datas = null;
        for(int i = 0 ; i < jsons.size() ; i++){
            JSONObject json = JSONObject.fromObject(jsons.get(i));
            String name = (String) json.get("payType");
            Object y = json.get("amt");
            
            datas = new SeriesDatasVO(name, y);
            dataList.add(datas);
        }
        
        SeriesChartVO chartVO = new SeriesChartVO("dailyStatistics", dataList);
        List<SeriesChartVO> chartList = new ArrayList<SeriesChartVO>();
        chartList.add(chartVO);
        
        return chartList;
    }
}

构建完数据后,最后一步就是使用jHighchart来实现图表了:

jhc = new $.jHighChart({
                renderTo: $("#chartDIV"),
                chartType: "pie",
                title: "商户日结算统计",
                xAxisName: "",
                xCategories:responseData.categories,
                yAxisSetting: [{ key: "dailyStatistics",name:"交易额" ,oppositeOption: false}],
                yAxisColumn: [{ key: "dailyStatistics",name:"总额"}],
                series: responseData.series,
                legend:{"enabled":false},
                plotOptions:{"dataEnable":true},
                click: function (params) {
                    queryDetail(params);
                }
        });
    jhc.create();

 

demo下载

chart.rar


--原文出自:http://cmsblogs.com/?p=1537,请尊重作者辛勤劳动成果,转载说明出处.

--个人站点:http://cmsblogs.com

更多相关文章
  • 一.Block语法 Block:块语法,本质上是匿名函数(没有名称的函数),Block变量存放函数的实现,通过Block变量能直接调?函数.标准C里面没有Block,C语言的后期扩展版本,加?了匿名函数.C++.JS.Swift等语?,有类似语法,叫做闭包.Block语法和函数指针很相似. Bloc ...
  • 在今天的文章里我想谈论下在可重复读隔离级别(Transaction Isolation Level Repeatable Read)里,当你运行事务时可能引起的2类死锁.当你使用可重复读(Repeatable Read)隔离级别设置你的事务,SQL Server对读取数据把持需要的共享锁(Share ...
  • 我没有时间去唠叨自己的事,可是你们是我喜欢的人,ay很愿意写给你们分享:去年的万人阅读的总结链接:<没学历的IT人生没那么悲催,献给程序员们> 提前声明:本文不良反应:请自备垃圾桶,准备装节操.因为节操掉了一地. 茗洋原创诗词:山重水复哦哈妖,牧童遥指纳尼村.商女不知么么哒,隔江犹唱亚麻 ...
  • 随着90后开始进入社会,如同当年80后创业一样,他们开始受到更多来自资本市场的关注,作为近年来在90后创业圈声名鹊起的创投团队成员,IDG资本合伙人李丰与年轻创业者打交道最多,同时也是他主导了很多起针对90后创业者的投资.年轻创业者的时代已经到来,投资和支持他们,或许就是抢占行业先机和制高点的关键节 ...
  • "移动互联网是这十年以来最好的一个机会,再不出来就晚了,所以我觉得一定得出来."带着放手一搏的信念,张锐于2011年离开易网.张锐,春雨天下(简称"春雨")创始人兼CEO:前<京华时报>新闻中心主任.前易网副总编辑."出来之后我们要做什么 ...
  • 作者:夏忠焱一.有关sniffer及sniffer的含义   sniffers(嗅探器)几乎和internet有一样久的历史了.Sniffer是一种常用的收集有用数据方法,这些数据可以是用户的帐号和密码,可以是一些商用机密数据等等.随着Internet及电子商务的日益普及,Internet的安全也越 ...
一周排行
  • LinkedIn近日推出了旨在为小型企业服务的新社交功能.企业主页(Company Pages):该功能于2010年11月上线,企业主页功能允许企业上传信息和产品图片至页面,并对推荐产品和产品介绍进行展示.其功能就像 ...
  • 题目链接:点击打开链接 题意: 给定n个物品, m个约束条件 把n个物品分到2个集合里 下面第一行表示i物品分到第一个集合里的花费 第二行表示分到第二个集合里的花费 第三行表示分物品的限制(1表示只能分到第一个集合, ...
  •         本文可视为<用HTML5实现人脸识别>的进阶,在人脸识别的基础上,我们将使用纯Javascript来实现如下的功能:识别和标注人脸以及五官对人脸进行美容        从本文的内容中,你将 ...
  • Zango是一个广告软件,也就是我们俗称流氓软件的一种,但是它跟国内的流氓软件"被清除了就忍着伺机而动"不同,不久前,它控告了ZoneAlarm的反间谍软件解决方案,这次,它又对PC Tools的 ...
  • 上一篇<白话tornado源码之待请求阶段>中介绍了tornado框架在客户端请求之前所做的准备(下图1.2部分),本质上就是创建了一个socket服务端,并进行了IP和端口的绑定,但是未执行 socke ...
  • oracle创建简单的函数   CREATE OR REPLACE FUNCTION hello   www.2cto.com   /***************************************** ...
  • Ubuntu现在官方主推的系统是14.04的64-bit,这东西在虚拟机划出1G内存给它也很卡,因此还是选择经典版本Ubuntu12.04.直接打开Ubuntu选择性下载页http://www.ubuntu.com/ ...
  • 微软中文技术论坛采访手记: 微软论坛管理团队成员做客51CTO,微软市场推广经理俞晖,微软MVP .论坛版主付仲凯,微软最有影响力开发者.论坛版主李庆与紫柔一起畅谈微软中文技术论坛日新月异的发展变化. 论坛成长和收获 ...
  • 在介绍WebRTC通讯之前我们先来看一个P2P视频聊天包括的主要过程,转载请说明出处(博客园RTC.Blacker):   音视频数据采集->编码->发送->接收->解码->播放. 编码 ...
  •          用了这么长时间的TM,发现我在公司的分组成员,在家里的没有,仔细一看原来是版本不同,家的是2006新春版,公司是2005正式版!          希望腾讯能及早发现此问题!