Question

我正在努力为我拥有的数据表添加更好的可视化，以便该列中的最高数字将具有绿色CSS背景，并且该列中的最低值将具有红色CSS背景。

我已经走得很远，我基本上到了最后一点。我是一个原生的PHP开发人员，所以我可能会搞乱整数比较以及没有正确地执行最终的jQuery选择器。代码选择同一列中的所有元素，查找最小值和最大值，计算步长值，并计算当前元素的最小值以上的步数。我现在需要做的就是根据步骤应用一个css类。这将是类似于0-5％范围内的值将具有css组0,5-10将具有css组1,10-15组2,95-100组20.所有css都在小提琴上。我成功应用了一个CSS类，但没有成功应用于单个单元格，而是为整个列

$(document).on('click', '#dvData td.color', function() {
    var ndx = $(this).index() + 1;
    //alert('Val of ndx: ' + ndx);
    var thisCol = $('#dvData td:nth-child(' +ndx+ ')');
    var arr = thisCol.slice(1, thisCol.length);

    var columnDataArr = new Array();
    alert("Number of rows: " + arr.length);
        //alert("First Row: " + arr[0].innerHTML);
    for(var i = 0, x = arr.length; i < x; i++){
        columnDataArr[i] = arr[i].innerHTML;
    }
    var colorsArray = ["63BE7B","72C27B","82C77C","91CB7D","A1D07E","B1D47F","C0D980","D0DD81","DFE282","EFE683","FFEB84","FFDE82","FED280","FDC47D","FDB87B","FCAA78","FB9D75","FB9073","FA8370","F9776E","F8696B"];

    var max = Math.max.apply(Math, columnDataArr),
        min = Math.min.apply(Math, columnDataArr),
        range = max - min,
        step_val = range/100;
        alert("Step Value:" + step_val);

    for(var i = 0, x = arr.length; i < x; i++){
        var thisPercentile = parseInt((columnDataArr[i] - min) / step_val);
        alert("Percentile:" + thisPercentile);     
        switch ( thisPercentile ) {
            // yes this looks terrible, but i can't seem to get the case to work
            // with: case(thisPercentile) <= 5:
            case 1:
            case 2:
            case 3:
            case 4:
            case 5:
            case 6:
                alert("Below 10th Percentile");
                break;
            case parseInt(90):
                alert("90th Percentile");
                //arr[2].addClass('group10') // doesn't work
                break;
        }
    }
    arr.addClass('group20');
});

所以这两个问题是如何处理将一个Range传递给switch语句（或者放弃并使用ifs和else ifs），以及正确的选择器是什么来定位当前表格单元格。我有my code on jsfiddle。

Answer 1

由于您的值范围从0到100，而您的组名从group0-group20开始，您可以进行一些数学运算并完全放弃switch / if语句。

如果你得到（值/ 5），你最终会得到0表示0-4,1表示5-9，... 19表示95-99,20表示100。

获取楼层值后，您可以将结果与组名称连接起来，并添加结果clsas，如下所示：

注意：你创建了一个带有splice的vanilla JS数组，所以你需要用$（）包装arr [i]把它变成一个jQuery对象。

jsfiddle：http://jsfiddle.net/7Luwyyxr/2/

    for(var i = 0, x = arr.length; i < x; i++){
        var thisPercentile = parseInt((columnDataArr[i] - min) / step_val);
        alert("Percentile:" + thisPercentile);     

        // added this stuff
        var gnum = Math.floor( thisPercentile/5 );  // returns 0 for 0-4, 1 for 5-9, ...
        //alert("Group Num: " + gnum);
        $(arr[i]).addClass('group'+gnum);  // appends class to array index
    }

Answer 2

此解决方案将在为2个数字指定相同颜色之前区分20个不同的数字。它与百分位数（例如，大于或等于的项目的百分比）一起分配颜色。最高值总是得到同一个类，最低值总是得到同一个类。中间的数字将取决于彼此分配的类别。

for(var i = 0, x = columnDataArr.length; i < x; i++){
    var greaterThan = 0;
    var curNum = columnDataArr[i];
    for(var j = 0, x = columnDataArr.length; j < x; j++){
        if(curNum <= columnDataArr[j]){
            greaterThan += 1;
        }

    }

    var percentile = Math.round((greaterThan*100)/columnDataArr.length);
    var group = Math.round(percentile/5);
    $(arr[i]).addClass('group'+group);
}

还有一个小提琴：http://jsfiddle.net/7Luwyyxr/4/

jQuery颜色缩放html表列

2 个答案: