在Javascript或jQuery中基于数值数组生成3个主色渐变

Question

表中有一列包含无序的数值.每个td都需要使用纯色绘制,使列形成无序渐变.

我创建了一个包含有序值的数值数组,现在我需要根据它生成渐变数组,因此数组的每个值都有相应的纯色.

较低的数字必须为红色,中等数字必须为黄色,较高的数字必须为绿色.所有这些颜色顺利地从自身转移到下一个.

所以基本上,有序数组将具有有序渐变,但是当我绘制列时,渐变将变为无序,因为列值不是有序的.
我想要达到的是那一列中的"新月级"渐变.

我怎么能用javascript或jQuery做到这一点？

Answer 1

更新问题后修改后的答案

我仍然认为我可以帮助你.我分叉并修改了我原来的JSFiddle以显示它是如何应用的.CSS保持相对相同.

听起来你想要为每个渐变级别都有特定的值,但我仍然认为移动的"条形"概念在应用多级渐变时效果最好.IE从一种颜色变为另一种不同颜色.这是因为如果你需要修改渐变颜色,那么它的工作量就会减少很多,因为你可以在CSS中更改背景线性渐变代码,并且无论你有多少行,它都能为你提供最平滑和最实用的渐变. .JSFiddle仍然有输入框,因此您可以看到渐变的每个"步骤".正如我之前所说,您可以访问www.colorzilla.com/gradient-editor/这样的网站,根据需要修改渐变,如果不喜欢从黄色到绿色的过渡,甚至可以添加中间颜色停止.

下面是将表中的所有值输入到多维数组中所需的jQuery代码.在数组之后,您可以对数组中的每一列进行排序(因为每列都是数组中自己的数组),并根据该数组中的"rank"或索引移动背景.因为我的理解是你想要根据最低值到最高值进行排序,而不是说0到100.

//jQuery for table
$("#someTable td").wrapInner("<span class='tdData'></span>");
$(".tdData").wrap("<div class='css3gradient'></div>");

var colVal = [];
var numCol = $("#someTable").find('tr')[0].cells.length;
var numRows = $("#someTable tr").length - 1; //subtract if header
var itemCount = 0;
var gradientWidth = $(".css3gradient").css("width").replace(/[^-\d\.]/g, '')-$(".tdData").css("width").replace(/[^-\d\.]/g, '');

//initialize array
for (var i = 0; i < numCol; i++) {
    colVal[i] = new Array();
}

//fill multidimensional array
$("table tr td").each(function () {
    curCol = itemCount % numCol;
    colVal[curCol].push($(this).text());
    itemCount++;
});

//sort values in array and assign value for gradient
for (i = 0; i < numCol; i++) {
    //sort values as numbers
    colVal[i] = colVal[i].sort(function (a, b) {
        return a - b;
    });
    //match each value in the array in order with value in table
    $.each(colVal[i], function (index, value) {
        $("#someTable td:nth-child(" + (i + 1) + ")").each(function () {
            if ($(this).text() == colVal[i][index]) {
                //Multiply current index with 
                ///Divide the total width of gradient box with
                ////Subtract total number of rows with one to make zero the first left position 
                ////and the last number the final position
                $(this).find(".css3gradient").css({ backgroundPosition: '-' + (index * (gradientWidth / (numRows - 1))) + 'px 0' });
            }
        });
    });
}

如果我误解了某些内容,请随时再次发表评论.这是一个非常有趣的问题需要解决,我希望我帮助或给了你至少朝正确方向迈出的一步.

原始答案

我为你做了一个JSFiddle,应该让你开始.说明如下.

根据我的理解,你希望div/span/input中的背景根据div/span/input中的值改变颜色.您希望较低的数字表示红色,并使用渐变来更改颜色,从红色>黄色>绿色,绿色是最大颜色.你也希望这是由jQuery控制的.

要做到这一点,我们可以堆叠几个div,并利用定位和溢出来"隐藏"我们用于背景的div的任何多余部分.

首先,我建议使用像http://www.colorzilla.com/gradient-editor/上的CSS Gradient Generator 来生成CSS代码.

接下来,让我们看一下数据的结构.你需要有3个元素才能使它工作.保存数据的内部元素.对于我的示例,我使用了一个输入元素,因此您可以更改值并进行测试.您想要的下一个元素是div,您可以将其用作"背景".这个元素将被绝对定位,所以我们可以从左到右移动它来获得我们想要的渐变.最后,您将需要外部包装的div,以便您可以利用溢出css规则来隐藏背景div中的多余部分.

所以对于参考,这是这个特定任务的html的样子:

<div class=“data”><div class=“css3gradient”><input /></div></div>

如果您无权访问HTML,快速修复是使用.wrap()jQuery函数.例如,如果你只有一个外部div和输入,你可以"包装"输入

$(“.data input”).wrap(“<div class=“css3gradient”></div>”);

对于梯度div,从数学上来说,它可能会让它变得有点不稳定,试图让它"排队".对于我的例子,我只是用总宽度来显示100px的数据,以及1100px的渐变背景的总宽度.在背景上额外100px的原因是因为当你将元素移动10倍时,你需要额外的宽度来填充剩余的div.IE零位占用0-100,第二位占用200-300,最后第十位占用1000-1100.您可以通过使渐变div的宽度为(x*10)+ x将此方法应用于任何宽度.

这也是从0到100的观点来看数据,就像你在做%s一样.

所以对于我的CSS来说这是它的样子:

.css3gradient{
    width:1100px;
    height:100px;
    position:absolute;

    background: #ff0000; /* Old browsers */
    background: -moz-linear-gradient(left,  #ff0000 0%, #ffff00 50%, #00ff00 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0000), color-stop(50%,#ffff00), color-stop(100%,#00ff00)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #ff0000 0%,#ffff00 50%,#00ff00 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #ff0000 0%,#ffff00 50%,#00ff00 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #ff0000 0%,#ffff00 50%,#00ff00 100%); /* IE10+ */
    background: linear-gradient(to right,  #ff0000 0%,#ffff00 50%,#00ff00 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#00ff00',GradientType=1 ); /* IE6-9 */

}

.data {
    width: 100px;
    height: 50px;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
    border: 1px solid #000;
    margin: 3px;
}

.data input {
    width: 100px;
    height: 50px;
    background: transparent;
    border: 0;
    text-align: center;
}

最后,有趣的部分.我们必须根据输入中的值实际移动此背景.我不确定你是否有某种输入或动态方式来改变每个元素中的值.无论如何,这个jQuery会让你入门.

$(".data input").each(function(){

    var dataValue = $(this);
    //call this initially set the background based on the value
    changeColor(dataValue.val());

    //this is what allows the background to change dynamically when you type into the input element
    dataValue.bind("keyup change input",function(){      
       changeColor(dataValue.val());
    });


    function changeColor(e) {
        var mulitplyColor = e * 10;
        dataValue.parent(".css3gradient").css({backgroundPosition: '-' + mulitplyColor + 'px 0'});
    }
});

希望这可以帮助!