Генерация 3 основных цветов градиента на основе числового массива в Javascript или jQuery

Question

В таблице есть столбец, который содержит неупорядоченные числовые значения. Каждый тд должен быть нарисован с использованием сплошных цветов таким образом, чтобы столбец образовывал неупорядоченный градиент.

Я создал числовой массив, который содержит эти упорядоченные значения, и теперь мне нужно сгенерировать массив градиентов на основе этого, чтобы каждое значение массива имело соответствующий сплошной цвет.

Нижние цифры должны быть красного цвета, средние цифры должны быть желтыми, а старшие цифры должны быть зеленого цвета. Все эти цвета плавно переходят от самого себя к следующему.

Таким образом, в основном, упорядоченный массив будет иметь упорядоченный градиент, но когда я нарисую столбец, градиент станет неупорядоченным, потому что значения столбцов не упорядочены.
То, что я пытаюсь достичь, это градиент "полумесяца" в этом столбце.

Как я могу сделать это с помощью JavaScript или JQuery?

Answer 1

---

Модифицированный ответ после обновления на вопрос

---

Я все еще думаю, что могу помочь тебе с этим. Я раздвоил и изменил свой оригинальный JSFiddle, чтобы показать, как это применяется. CSS остается относительно прежним.

Звучит так, как будто вы хотите иметь конкретные значения для каждого уровня градиента, но я все еще думаю, что концепция "движущейся панели" лучше всего работает при применении многостопочных градиентов. То есть переход от одного цвета к другому отличается. Это связано с тем, что вам гораздо меньше нужно работать, если вам нужно изменить цвета градиента, поскольку вы можете просто изменить фоновый код линейного градиента в CSS, а также получить самый плавный и самый реальный градиент независимо от того, сколько у вас строк, JSFiddle по-прежнему имеет поля ввода, чтобы вы могли видеть каждый "шаг" градиента. Как я уже говорил, вы можете перейти на сайт, такой как www.colorzilla.com/gradient-editor/, изменить градиент в соответствии с вашими потребностями и даже добавить промежуточную остановку цвета, если, скажем, вам не нравится переход с желтого на зеленый,

Вот код jQuery, который вам понадобится для ввода всех ваших значений из таблицы в многомерный массив. После того, как он находится в массиве, вы можете упорядочить каждый столбец в массиве (поскольку каждый столбец является собственным массивом в массиве) и перемещать фон на основе "ранга" или индекса в этом массиве. Так как я понимаю, что вы хотели отсортировать на основе наименьшего значения к наибольшему значению, а не сказать от 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, математически, он может быть немного шатким, пытаясь заставить его "выстроиться". Для моего примера я просто использовал общую ширину для отображения данных в 100 пикселей и общую ширину для градиентного фона в 1100 пикселей; Причина дополнительных 100 пикселей на фоне в том, что когда вы перемещаете элемент на 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'});
    }
});

Надеюсь это поможет!