基于Ext的Highchart控件.

  最近花了点时间,完成了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");
});

后台数据结构如图所示.一般的.如果数据结构特殊,可以自己重写转换方法.

示例效果如图: