最近花了点时间,完成了Highchart在Ext平台上扩展.highchart.src.js文件可以在highchart.com官网上下载.我扩展的控件已经上传到我的空间,可以去我空间上下载
截取部分代码如下.数据的组织和转换关键部分
/*
key_x :""
key_y :[]
key_y_desc:[]
type : {y1 : "column",y2:"spine",y3:"areaspine" ...........}
y_axis :{y1 :0,y2:1 ......}
*/
data_parser: function (json_data, root, key_x, key_y, key_y_desc, l_name, series_type, y_axis){
var rs = splat(getSubObj(json_data, root));
key_y = splat(key_y);
var _len = rs.length;
var series = [];
var legend = [];
var objs = {};
var _x = [];
var r;
for (var i = 0; i < _len; i++){
r = rs[i];
var p_x = r[key_x];
_x.push(p_x);
legend.push(r[l_name]);
if ( ! objs[r[l_name]]) objs[r[l_name]] = {};
for (var j = 0; j < key_y.length; j++){
var p_y = r[key_y[j]];
if ( ! objs[r[l_name]][key_y[j]]){
objs[r[l_name]][key_y[j]] = {};
}
objs[r[l_name]][key_y[j]][p_x] = parseFloat(p_y);
}
}
_x = _x.distinct().sort();
legend = legend.distinct();
/* X 轴 null 值补全*/
for (var p in objs){
for (var a in objs[p]){
var t = objs[p][a];//{}
var rs = [];
for (var i = 0; i < _x.length; i++){
if ( ! t[_x[i]]){
rs.push(null);
}
else{
rs.push(t[_x[i]]);
}
}
objs[p][a] = rs;
}
}
for (var i = 0; i < key_y.length; i++){
var t = key_y[i];
for (var j = 0; j < legend.length; j++){
var l = legend[j];
series.push({
name: l + ( ! Ext.isEmpty(key_y_desc[i]) ? "[" + key_y_desc[i] + "]" : ""),
type: series_type[t],
yAxis: y_axis[t],
data: objs[l][t]
});
}
}
return{
series: series,
xAxis: _x
};
}
示例代码如下:配置很灵活,也很简单.如下所示:
Ext.onReady(function(){
var highchart_demo = new Ext.ux.Highchart({
height: "500",
theme: "grid",
margin: [80, 200, 60, 100],
title: "卷包机台,品牌与台时效率图",
sub_title: "",
/*----------*/
is_convert: true,
is_legend: true,
//legend_layout :"vertical",
url: "data/ux_chart_data4.txt",
legend_layout: "horizontal",
root: "dataset.jobefficiencystatisticvo",
key_x: "machineGroupName",
key_y: ['realityCapacity', 'theoryCapacity'],
//key_y_desc :['实际产量',"计划产量"],
l_name: "brandName",
//stacking :"normal",
series_type: {
'realityCapacity': "spline",
'theoryCapacity': "column"
},
serise_yaxis: {
'realityCapacity': 0,
'theoryCapacity': 1
},
/*----------*/
yAxis: [{
name: "实际产量",
color: "gray",
unit: "(箱/小时)"
},
{
name: "计划产量",
color: "#89A54E",
unit: "(箱/小时)"
}]
});
highchart_demo.render("container");
});
后台数据结构如图所示.一般的.如果数据结构特殊,可以自己重写转换方法.