funsionCharts jQuery
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/underscore/1.3.3/underscore.js"></script>
如果要使用返回funsionCharts 使用的json数据需添加jquery.xml2json.js
/*
* fusionChart 自动拼接XML
* autor
* Date 2013年12月27日
*/
(function($) {
$._NH_Chart = function(option) {
var settings = {
datas: [], //数据
chart: "", //
other: "", //sytle等其他xml配置
series: [], //图例--默认自动加载
cate: [], // 描述--默认自动加载
color: [], //颜色不带#的颜色值
isSliced: [], //饼图哪个切片分开[0,1......] //单系列使用
link: "", //添加click钻取功能
dataFormat: "xml", //返回的数据格式,xml返回xml,json返回json默认xml
chartType: "Single", //报表的类型 Single 单系列 Multi 多系列,Point 为散点图
num: "999", //柱形折线组合图,默认柱形图,当值小于图例数,则显示折线,多系列图中使用
fn_Color: "", //通过阀值控制颜色 //单系列使用
setPro: "" //dataset中的样式
};
option = option || {};
options = $.extend(true, settings, option);
return $._NH_Chart.init(options);
};
$.extend($._NH_Chart, {
init: function(options) {
var data;
switch (options.chartType) {
case "Single":
data = $._NH_Chart.fitSingleChart(options);
break;
case "Multi":
data = $._NH_Chart.fitMultiChart(options)
break;
case "Point":
data = $._NH_Chart.fitPointChart(options);
break;
default:
break;
}
if (options.dataFormat === "json") {
data = "<xml>" + data + "</xml>";
data = $.xml2json(data)
}
return data;
},
fitSingleChart: function(opts) {
var xml = "<chart " + opts.chart + ">\n";
_.each(opts.datas, function(item, index) {
var mapData = _.map(item, function(value, key) {
return value;
});
xml += "<set label='" + mapData[0] + "' value='" + mapData[1] + "'";
if (_.contains(opts.isSliced, index)) {
xml += " isSliced='1'";
}
if (opts.color.length > 0) {
xml += " color='" + opts.color[index] + "'"
}
if (typeof opts.fn_Color === "function") {
xml += " color='" + opts.fn_Color(mapData[1]) + "'"
}
if (opts.link != "") {
xml += " link='javascript:" + opts.link + "(\"" + mapData[0] + "\",\"" + mapData[1] + "\")'";
}
xml += " />\n";
});
xml += opts.other + "</chart>";
return xml;
},
fitMultiChart: function(opts) {
var xml = "<chart " + opts.chart + "";
xml += "legendBorderThickness='0' legendBorderAlpha='0' legendShadow='0' showLegend='1' legendBgColor='072e4f'";
xml += "divLineIsDashed='1' divLineThickness='5' formatNumberScale='0' unescapeLinks='0'";
xml += ">\n";
var categories = [];
var seriesNames = [];
//循环去重
_.each(opts.datas, function(item) {
var mapData = _.map(item, function(value, key) {
return value;
});
if (!_.contains(categories, mapData[1])) {
categories.push(mapData[1]);
}
if (!_.contains(seriesNames, mapData[0])) {
seriesNames.push(mapData[0]);
}
});
//自定义图例和 label
if ("object" == typeof opts.series && opts.series.length > 0) {
seriesNames = opts.series;
}
if ("object" == typeof opts.cate && opts.cate.length > 0) {
categories = opts.cate;
}
xml += "<categories>\n";
_.each(categories, function(category) {
xml += "<category label = '" + category + "' />\n"
});
xml += "</categories>\n";
_.each(seriesNames, function(seriesName, index) {
if (index < opts.num) {
xml += "<dataset color='" + opts.color[index] + "' seriesName='" + seriesName + "' showValues='0'>\n";
_.each(categories, function(category) {
var flag = 0;
_.each(opts.datas, function(item) {
var dataEach = _.map(item, function(value, key) {
return value;
});
if (dataEach[0] == seriesName && dataEach[1] == category) {
if (options.link != '') {
xml += "<set value='" + dataEach[2] + "' link='javascript:" + opts.link + "(\"" + dataEach[0] + "\",\"" + dataEach[1] + "\",\"" + dataEach[2] + "\")' />\n";
} else {
xml += "<set value='" + dataEach[2] + "' />\n";
}
flag = 1;
}
});
if (flag == 0) {
xml += "<set />";
}
});
xml += "</dataset>\n";
} else {
xml += "<dataset color='" + opts.color[index] + "' seriesName='" + seriesName + "' showValues='0' renderAs='Line'>\n";
_.each(categories, function(category) {
var flag = 0;
_.each(opts.datas, function(item) {
var dataEach = _.map(item, function(value, key) {
return value;
});
if (dataEach[0] == seriesName && dataEach[1] == category) {
xml += "<set value='" + dataEach[2] + "'/>\n";
flag = 1;
}
});
if (flag == 0) {
xml += "<set />";
}
});
xml += "</dataset>\n";
}
});
xml += opts.other + "\n</chart>";
return xml;
},
fitPointChart: function(opts) {
}
});
})(jQuery);暂时完成单系列和多系列的