根据 Javascript 或 jQuery 中的数值数组生成 3 种主要颜色渐变

Question

table 中有一列包含未排序的数值。每个 td 都需要使用纯色绘制，使列形成无序渐变。

我创建了一个包含这些值的数值数组，现在我需要基于它生成渐变数组，因此数组的每个值都将具有相应的纯色。

较低的数字必须是红色的，中等的数字必须是黄色的，较高的数字必须是绿色的。所有这些颜色从自身平滑过渡到下一个。

所以基本上，有序数组将具有有序渐变，但是当我绘制列时，渐变将变得无序，因为列值没有排序。
我想要达到的是该列中的 "crescent rank" 渐变。

如何用 javascript 或 jQuery 做到这一点？

Answer 1

更新问题后修改答案

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

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

这是 jQuery 代码，您需要将 table 中的所有值输入多维数组。在数组中之后，您可以对数组中的每一列进行排序（因为每一列都是数组中它自己的数组）并根据 "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。

首先，我建议使用 CSS 渐变生成器，例如 http://www.colorzilla.com/gradient-editor/ 中的那个来生成您的 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'});
    }
});

希望对您有所帮助！

根据 Javascript 或 jQuery 中的数值数组生成 3 种主要颜色渐变

Generate 3 main colors gradient based on numeric array in Javascript or jQuery

javascript

jquery

linear-gradients