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