fusioncharts 集成Jquery开发插件

阿三给的fusioncharts在做图标什么的确实方便，由于项目需要，一起谢了个插件。方便使用，就写个简单的DEMO了。

在开发之前的去阿三的官网下载fusioncharts的js了，以前他是基于swf的，现在h5时代了，阿三的牛逼xx的。

开发jquery插件的自然的用闭包了，然后使用的传入实体信息。还得有默认的时的信息。

(function($) {/*** 初始化操作*/function init(dom, options) {if(!$(dom).data("options")) {$(dom).data("options",options);}// 填充 label、seriesname数据（数据库查询都是code，需要替换成文本格式）$(dom).data("label", options.labelConvertor);$(dom).data("seriesname", options.seriesnameConvertor);if(options.ajaxLabel) { // 替换 label（如果是基于数据库的，那就查库在替换）convertMarked(dom, "label", options.ajaxLabel);}if(options.ajaxSeriesname) { // 替换 seriesname（如果是基于数据库的，那就查库在替换）convertMarked(dom, "seriesname", options.ajaxSeriesname);}requestData(dom);}/*** Ajax 获取替换对象*/function convertMarked(dom, mark, replaceMarks) {$.ajax({type: "POST",url: replaceMarks.url,async: true,data: replaceMarks.dataParam,success: function(data) { // 请求成功或的数据$(dom).data(mark, data);}});}/*** 请求服务器数据*/function requestData(dom) {$(dom).loaders(); // 这个是自己开发的一个loading插件，也是基于css3的var options = $(dom).data("options");/*$.ajax({// 请求成功或的数据的真实数据，现在是测试阶段就直接上数据了。type: "POST",url: options.url,async: true,data: options.dataParam,success: function(data) { $(dom).data("dataset", data);}});*/var test ={"categories": [{"category": [{"label": "Q1"},{"label": "Q2"},{"label": "Q3"},{"label": "Q4"}]}],"dataset": [{"seriesname": "Previous Year","data": [{"value": "10000"},{"value": "11500"},{"value": "12500"},{"value": "15000"}]},{"seriesname": "Current Year","data": [{"value": "25400"},{"value": "29800"},{"value": "21800"},{"value": "26800"}]}]}buildChart(dom, test);}function buildChart(dom, data) {replaceData(dom, data);drawchart(dom);}/*** 转换最终数据*/function replaceData(dom, data) {var labelCon = $(dom).data("label");var seriesnameCon = $(dom).data("seriesname");var isclick = ($(dom).data("options").clickChart!=null?true:false);if($.isArray(data)) { // data 数据for(var k=0,n=data.length;k<n;k++) {if(isclick) {console.log($(dom).data("options").clickChart)data[k].link = "javascript:"+$(dom).data("options").clickChart+"("+JSON.stringify(data[k])+")";}if(!$.isEmptyObject(labelCon)) {data[k].label = labelCon[data[k].label];}}$(dom).data("dataset",{"data": data});} else { // 返回对象，需要部分特殊处理var labels = data.categories[0].category;var ds = data.dataset;if(!$.isEmptyObject(seriesnameCon) || isclick) {for(var d=0,m=ds.length;d<m;d++) {// 添加链接，点击是可以获取点击部分的数据if(isclick) {var subds = ds[d].data;var params = {};params.label = labels[d].label;params.seriesname = ds[d].seriesname;for(var sd=0,r=subds.length;sd<subds.length;sd++) {params.value=subds[sd].value;subds[sd].link = "javascript:"+$(dom).data("options").clickChart+"("+JSON.stringify(params)+")";}}if(!$.isEmptyObject(seriesnameCon)) {ds[d].seriesname=seriesnameCon[ds[d].seriesname]!=null?seriesnameCon[ds[d].seriesname]:ds[d].seriesname;}}}if(!$.isEmptyObject(labelCon)) {for(var k=0,n=labels.length;k<n;k++) {labels[k].label = labelCon[labels[k].label]!=null?labelCon[labels[k].label]:labels[k].label;}}$(dom).data("dataset", data);}}/*** 画样式*/function drawchart(dom) {var options = $(dom).data("options");var dataSource = $.extend(true,{}, $.fn.easychart.types[options["type"]], $.fn.easychart.types[options["style"]], $(dom).data("dataset"));var chartObject = $.extend({}, {type: options["type"]+options["model"], width:$(dom).width(), height:$(dom).height(), dataFormat:options["dataFormat"]},{dataSource:dataSource});//console.log(JSON.stringify(chartObject))$(dom).insertFusionCharts(chartObject);setTimeout(function() {// 删掉loading遮罩

         $(dom).loadersClose();}, 1000);$("#"+dom.id+" tspan:contains('FusionCharts')").remove(); // 不是免费的玩野在图表下面总有一段话。。直接remove掉}$.fn.easychart = function(options, params) {if(typeof options == "string") {console.log(options);$.fn.easychart.method[options](this ,params);} else {options = options || {};options = $.extend(true, {}, $.fn.easychart.defaults, options);return this.each(function() {init(this, options);});}};$.fn.easychart.method = {reload : function(dom, params) {// 删除存储数据，并重新设置return dom.each(function() {requestData(this);});},// 根据数据查询替换label文本ajaxLabel : function(dom, params) {convertMarked(dom, "label", options.ajaxLabel);},// 根据数据查询替换seriesname文本ajaxSeriesname: function(dom, params) {convertMarked(dom, "seriesname", options.ajaxSeriesname);}};// 展示图表样式，可以自己根据需求添加$.fn.easychart.types = {column: {"chart": {"caption": "Monthly revenue for last year","subCaption": "Harry's SuperMart","xAxisName": "Month","yAxisName": "Revenues (In USD)","numberPrefix": "$","paletteColors": "#0075c2","bgColor": "#ffffff","borderAlpha": "20","canvasBorderAlpha": "0","usePlotGradientColor": "0","plotBorderAlpha": "10","placevaluesInside": "1","rotatevalues": "1","valueFontColor": "#ffffff","showXAxisLine": "1","xAxisLineColor": "#999999","divlineColor": "#999999","divLineDashed": "1","showAlternateHGridColor": "0","subcaptionFontBold": "0","subcaptionFontSize": "14"}},area: {"chart": {"caption": "Sales of Liquor","subCaption": "Last week","xAxisName": "Day","yAxisName": "Sales (In USD)","numberPrefix": "$","paletteColors": "#0075c2","bgColor": "#ffffff","showBorder": "0","showCanvasBorder": "0","plotBorderAlpha": "10","usePlotGradientColor": "0","plotFillAlpha": "50","showXAxisLine": "1","axisLineAlpha": "25","divLineAlpha": "10","showValues": "1","showAlternateHGridColor": "0","captionFontSize": "14","subcaptionFontSize": "14","subcaptionFontBold": "0","toolTipColor": "#ffffff","toolTipBorderThickness": "0","toolTipBgColor": "#000000","toolTipBgAlpha": "80","toolTipBorderRadius": "2","toolTipPadding": "5"}},mscolumn: {"chart": {"caption": "Comparison of Quarterly Revenue","xAxisname": "Quarter","yAxisName": "Revenues (In USD)","numberPrefix": "$","plotFillAlpha": "80","paletteColors": "#0075c2,#1aaf5d","baseFontColor": "#333333","baseFont": "Helvetica Neue,Arial","captionFontSize": "14","subcaptionFontSize": "14","subcaptionFontBold": "0","showBorder": "0","bgColor": "#ffffff","showShadow": "0","canvasBgColor": "#ffffff","canvasBorderAlpha": "0","divlineAlpha": "100","divlineColor": "#999999","divlineThickness": "1","divLineDashed": "1","divLineDashLen": "1","divLineGapLen": "1","usePlotGradientColor": "0","showplotborder": "0","valueFontColor": "#ffffff","placeValuesInside": "1","showHoverEffect": "1","rotateValues": "1","showXAxisLine": "1","xAxisLineThickness": "1","xAxisLineColor": "#999999","showAlternateHGridColor": "0","legendBgAlpha": "0","legendBorderAlpha": "0","legendShadow": "0","legendItemFontSize": "10","legendItemFontColor": "#666666"}}}// 默认值，请求是需要传入了$.fn.easychart.defaults = {url: null,                       // 请求的URL地址dataParam: null,                 // 请求dataFormat:"json",               // 展示数据格式 type:"column",                   // fsc类型model:"2d",                      // fsc 模型ajaxLabel: null,                 // label 替换数据  AjaxajaxSeriesname: null,            // seriesname 替换数据  AjaxlabelConvertor:{},               // label 替换数据  ObjectseriesnameConvertor: {},         // label 替换数据  ObjectclickChart: null,                // 点击出发事件style:{},                        // fcs chart扩展};})(jQuery);

以上是插件部分。在使用时（有关根据数据库查询替换的没有测试，可以在项目中指定返回格式一致就可以了）：

<pre name="code" class="html"><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%String path = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="<%=path%>/css/loaders/loaders.css" type="text/css">
<link rel="stylesheet" href="<%=path%>/css/loaders/loaders.min.css" type="text/css">
<link rel="stylesheet" href="<%=path%>/css/pagination.css" type="text/css">
<link rel="stylesheet" href="<%=path%>/css/iscroll.css" type="text/css">
<script type="text/javascript">var _root_path = "<%=path%>";
</script>
<script type="text/javascript" src="<%=path%>/js/jquery-2.1.js"></script>
<script type="text/javascript" src="<%=path%>/js/jquery.loaders.plug.js"></script>
<script type="text/javascript" src="<%=path%>/js/fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="<%=path%>/js/fusioncharts/fusioncharts.charts.js"></script>
<script type="text/javascript" src="<%=path%>/js/fusioncharts/fusioncharts.gantt.js"></script>
<script type="text/javascript" src="<%=path%>/js/fusioncharts/fusioncharts.maps.js"></script>
<script type="text/javascript" src="<%=path%>/js/fusioncharts/fusioncharts.powercharts.js"></script>
<script type="text/javascript" src="<%=path%>/js/fusioncharts/fusioncharts.widgets.js"></script>
<script type="text/javascript" src="<%=path%>/js/fusioncharts/fusioncharts.jqueryplugin.js"></script>
<script type="text/javascript" src="<%=path%>/js/jquery.easychart.plug.js"></script>
</head>
<body>
<div id="chart1" style="width:300px;height: 270px"></div><div id="chart2" style="width:500px;height: 670px"></div><input type="button" id="b1" value="ceshi111">
</body>
<script type="text/javascript">$(function() {$("#chart1").easychart({clickChart:"clickChart",type:"mscolumn",labelConvertor:{"Q1":"第一季度","Q2":"第二季度"},seriesnameConvertor:{"Previous Year":"同期"},model:"2D"});$("#chart2").easychart({clickChart:"clickChart",type:"mscolumn",labelConvertor:{"Q1":"第一季度","Q2":"第二季度"},seriesnameConvertor:{"Previous Year":"同期"},model:"2D"});$("#b1").click(function() {$("#chart1").easychart("reload");});});function clickChart(chartdata) {console.log(JSON.stringify(chartdata));}
</script>
</html>

fusioncharts 集成Jquery开发插件相关推荐

jquery开发插件_如何开发jQuery插件
jquery开发插件 We have gone through different jQuery event methods, jQuery effects and animations in the ...
前端-查询参考资料网站/软件/移动端、jQuery开发插件官网
1. ECharts(数据可视化模板) https://echarts.apache.org/zh/index.html 2. CanIuse网站-用于判断技术能在哪些浏览器使用的兼容性(绿色表示 ...
网站开发中很有用的几个 jQuery 地图插件
下面提到的 jQuery 地图插件不仅仅是提供一个简便的方式来安装一个地图,如果你想在它们之间选择一个放到你的网站上,那么它们还有更多的额外选项来提供更多更全面的功能.大部分的 jQuery 地图插件 ...
实用Jquery开发自己的插件
实用Jquery开发自己的插件 jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身 ...
使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
推荐8个最佳的jQuery移动开发插件
这篇文章,我们将介绍与共享jQuery的一些最好的移动插件去开发移动应用.正如我们在过去所说的文章 - jQuery是流行的JavaScript库,你可以在Web项目中包含这个库,您将可以更容易和更高 ...
开发人员应该知道的15个吸引力的jquery lightbox插件推荐
jQuery 是非常流行的JS框架,其俨然已成了开发者的必备工具,其中的jQuery Lightbox插件更是为广大开发者所喜爱.它惊人的特征之一是jQuery Lightbox插件有很多变化.你可以 ...
odl自开发插件编译集成到发行版（opendaylight学习笔记二）
上一篇:opendaylinght内核插件开发简单实现(opendaylight学习笔记一) 1.下载发行版项目源码 git clone "https://git.opendaylight. ...
超强1000个jquery极品插件！（连载中。。。。最近更新20090710）
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...

fusioncharts 集成Jquery开发插件

fusioncharts 集成Jquery开发插件相关推荐

最新文章

热门文章