橄榄型區間容量顯示條插件

在使用者填寫滿意度評價等表單時，可能會要求符合橄榄型的評價分布

對使用者來說，評分的同時還要照顧到橄榄型分布，往往按下個葫蘆起來個瓢，焦頭爛額不已

那此時如果有一個很友好的實時提醒，告訴使用者橄榄型各區間的分布情況，那他在評分的時候就會有一個很直覺的參考，不至于顧此失彼

基于以上背景，寫了這個小插件，已經在公司的項目中使用，具備一定的實用價值

時間倉促，代碼品質一般，以後有時間再進行整理。

首先是最終效果圖：

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: [email protected]
 *
 * @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); }
}
/**************************************************************/      

寵辱不驚，看庭前花開花落；去留無意，望天上雲卷雲舒