在用户填写满意度评价等表单时，可能会要求符合橄榄型的评价分布
对用户来说，评分的同时还要照顾到橄榄型分布，往往按下个葫芦起来个瓢，焦头烂额不已
那此时如果有一个很友好的实时提醒，告诉用户橄榄型各区间的分布情况，那他在评分的时候就会有一个很直观的参考，不至于顾此失彼
基于以上背景，写了这个小插件，已经在公司的项目中使用，具备一定的实用价值
时间仓促，代码质量一般，以后有时间再进行整理。
首先是最终效果图：
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 + " <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); } } /**************************************************************/
宠辱不惊，看庭前花开花落；去留无意，望天上云卷云舒
