橄榄型区间容量显示条插件

在用户填写满意度评价等表单时，可能会要求符合橄榄型的评价分布

对用户来说，评分的同时还要照顾到橄榄型分布，往往按下个葫芦起来个瓢，焦头烂额不已

那此时如果有一个很友好的实时提醒，告诉用户橄榄型各区间的分布情况，那他在评分的时候就会有一个很直观的参考，不至于顾此失彼

基于以上背景，写了这个小插件，已经在公司的项目中使用，具备一定的实用价值

时间仓促，代码质量一般，以后有时间再进行整理。

首先是最终效果图：

 

JS调用示例：

var cfgJson = [{"caption": "低分区", "total": 5, "lowlimit": 0, "uplimit": 20}, {"caption": "中等区", "total": 20, "lowlimit": 21, "uplimit": 80}, {"caption": "高分区", "total": 5, "lowlimit": 81, "uplimit": 100}];
var dataJson = [["id1", 15],["id2", 46],["id3", 58],["id4", 73],["id5", 85]];
var bar = new SpaceLimitBar("box", cfgJson, dataJson, true);
bar.init(); //初始化并显示区间条
bar.push(["id3", 19]); //改变已有数值
bar.push(["id6", 99]); //添加新数值
bar.push(["id7", 99]); //添加新数值
bar.push(["id8", 99]); //添加新数值
bar.push(["id9", 99]); //添加新数值
bar.push(["id9", 12]); //改变已有数值

 

附上源码：

/**************************************************************
 * 橄榄型区间容量显示条
 *
 * SpaceLimitBar(containerId, cfg, data, showErr)
 *
 * @author: netwild@qq.com
 *
 * @params:
 *   1.containerId (String，必填) : 渲染显示条的容器ID，例如："box"
 *
 *   2.cfg (JSON，必填) : 区间配置，JSON数组格式，例如：
 *                [
 *                    {"caption": "低分区", "total": 5, "lowlimit": 0, "uplimit": 20}
 *                   ,{"caption": "中等区", "total": 20, "lowlimit": 21, "uplimit": 80}
 *                   ,{"caption": "高分区", "total": 5, "lowlimit": 81, "uplimit": 100}
 *                ]
 *
 *   3.data (JSON，可选) : 初始化数据，JSON数组格式，例如：
 *                [["id1", 15],["id2", 46],["id3", 58],["id4", 73],["id5", 85]]
 *                以上语句初始化了5个区间数据，每个数据由ID及数值组成
 *
 *   4.showErr (boolean，可选，默认为false) : 添加数据时，如果所对应区间达到限额，是否弹出提示框
 *
 * @demo:
 *
 *    var cfgJson = [{"caption": "低分区", "total": 5, "lowlimit": 0, "uplimit": 20}, {"caption": "中等区", "total": 20, "lowlimit": 21, "uplimit": 80}, {"caption": "高分区", "total": 5, "lowlimit": 81, "uplimit": 100}];
 *    var dataJson = [["id1", 15],["id2", 46],["id3", 58],["id4", 73],["id5", 85]];
 *    var bar = new SpaceLimitBar("box", cfgJson, dataJson, true);
 *    bar.init();  //初始化并显示区间条
 *    bar.push(["id1", 99]); //改变已有数值
 *    bar.push(["id6", 99]); //添加新数值
 *    bar.push(["id7", 99]); //添加新数值
 *    bar.push(["id8", 99]); //添加新数值
 *    bar.push(["id9", 99]); //添加新数值
 *    bar.push(["id9", 12]); //改变已有数值
 *
 */
function SpaceLimitBar(containerId, cfg, data, showErr){
    var _self = this;
    var _colorTh = ["#8A3700", "#004600", "#004182", "#9B005E", "#910000"];
    var _colorTd = ["#FF9900", "#00CC00", "#00CCCC", "#FF66CC", "#CCCC00"];
    var cfgInd = {};

    this.push = function(dataItem){
        var obj = dataItem[0];
        var val = dataItem[1];
        for(var ind in cfg){
            var space = cfg[ind];
            if(val >= space.lowlimit && val <= space.uplimit){
                if(cfgInd[obj] == ind){
                    space["data"][obj] = val;
                }else{
                    if(space["used"] == space["total"]){
                        _self.exception("区间“" + space.caption + "（" + space.lowlimit + " ~ " + space.uplimit + "）”的配额已经达到上限值（" + space.total + "）\r\n" + obj + " : " + val + " 添加失败！");
                        return false;
                    }else{
                        space["data"][obj] = val;
                        space["used"] ++;
                        if(cfgInd[obj] != undefined){
                            var oldInd = cfgInd[obj];
                            cfg[oldInd]["used"]--;
                            delete  cfg[oldInd]["data"][obj];
                            _self.reset(oldInd);
                        }
                        cfgInd[obj] = ind;
                        _self.reset(ind);
                        return true;
                    }
                }
            }
        }
    }
    this.reset = function(ind){
        var colorTd = _colorTd[ind];
        var space = cfg[ind];
        _self.$("used_" + containerId + "_" + ind).innerHTML = space.used;
        
        for(var x=1; x<=space.total; x++){
            var tdobj = _self.$("td_" + containerId + "_" + ind + "_" + x);
            tdobj.style.background = x <= space.used ? colorTd : "";
        }
    }
    this.init = function(){
        var html = [], rowTh = [], rowTd = [];
        html.push("<style>");
        html.push(".spaceLimitBar{width:100%;height:100%;padding:0px;table-layout:fixed;cursor:default;font-family:微软雅黑}");
        html.push(".spaceLimitBar th{color:#FFF;text-align:center;font-size:10pt;height:40px;line-height:20px;font-weight:normal}");
        html.push(".spaceLimitBar td{width:auto}");
        html.push("</style>");
        html.push("<table class=\"spaceLimitBar\" cellspacing=\"2\">");
        for(var ind in cfg){
            var space = cfg[ind];
            var colorTh = _colorTh[ind], colorTd = _colorTd[ind];
            if(space["used"] == undefined) space["used"] = 0;
            if(space["data"] == undefined) space["data"] = {};
            rowTh.push("<th colspan=\"" + space.total + "\" style=\"border:2px solid " + colorTh + ";background:" + colorTh + "\">");
            rowTh.push(space.caption + "&nbsp;<span id=\"used_" + containerId + "_" + ind + "\">" + space.used + "</span>/" + space.total);
            rowTh.push("<br/><span style=\"color:" + colorTd + "\">" + space.lowlimit + " ~ " + space.uplimit + "</span>");
            rowTh.push("</th>");
            for(var x=1; x<=space.total; x++){
                rowTd.push("<td id=\"td_" + containerId + "_" + ind + "_" + x + "\" style=\"border:2px solid " + colorTd + ";" + (x <= space.used ? "background:" + colorTd : "") + "\"><div></div></td>");
            }
        }
        html.push("<tr>" + rowTh.join("") + "</tr>");
        html.push("<tr>" + rowTd.join("") + "</tr>");
        html.push("</table>");
        _self.$(containerId).innerHTML = html.join("");

        if(data != undefined) for(var ind in data) _self.push(data[ind]);
    }
    this.exception = function(e){
        if(showErr != undefined && showErr) alert(e);
    }
    this.$ = function(prmId){ return document.getElementById(prmId); }
}
/**************************************************************/