У меня есть список значений, которые должны быть нанесены на карту с определенным цветом. Закладка на карту уже выполнена, но мне нужно выяснить способ сопоставления значения n с цветом, который представляет его значение.
Пример и мое решение до сих пор – нормализовать значения на основе min и max а затем назначить их шестнадцатеричному цвету 0 для самого низкого и 255 для самого высокого. Это, конечно, ограничивает мое «я» серой шкалой. Вот код:
$color = ($value / $max) * 255 // (min is zero)
Но как это сделать, если значения должны идти от синего до красного, например? Есть ли общие библиотеки или инструменты, которые могут решить эту проблему? Пока я не смог найти никого.
Для этого могут быть libs. Однако давайте немного разойдемся с общими принципами. В общем, у вас есть следующие варианты:
$coloridx=array(0=>'#FFFFFF',1=>'#FFEE00',...); индекс цвета, например $coloridx=array(0=>'#FFFFFF',1=>'#FFEE00',...); Если вы включаете алгоритмы в свои соображения, вы должны понимать, что нет true или false . Все зависит от того, что вы хотели бы реализовать. Могут быть случаи, когда имеет смысл отображать изменения зеленого цвета на n=0..10 а затем красным до черного во всем, кроме n>10 . Шапки и мультипликаторы помогают устанавливать акценты. Такие вещи.
Одним из способов реализации линейного градиента было бы:
function lineargradient($ra,$ga,$ba,$rz,$gz,$bz,$iterationnr) { $colorindex = array(); for($iterationc=1; $iterationc<=$iterationnr; $iterationc++) { $iterationdiff = $iterationnr-$iterationc; $colorindex[] = '#'. dechex(intval((($ra*$iterationc)+($rz*$iterationdiff))/$iterationnr)). dechex(intval((($ga*$iterationc)+($gz*$iterationdiff))/$iterationnr)). dechex(intval((($ba*$iterationc)+($bz*$iterationdiff))/$iterationnr)); } return $colorindex; } $colorindex = lineargradient( 100, 0, 0, // rgb of the start color 0, 255, 255, // rgb of the end color 256 // number of colors in your linear gradient ); $color = $colorindex[$value];
Я ОБНОВЛЯЛ код для добавления dechex, который возвращает комментарии.
Другой ответ был очень полезен. Я решил использовать JS, поскольку он снижает нагрузку на сервер. Требования также изменились. Бар должен перейти от красного к белому посередине, а затем от белого до желтого. И если значение равно 0, оно должно быть черным. Вот мой код для тех, кто когда-либо сталкивается с подобной ситуацией.
var normalize_base = 2*255; var no_con_color = "black"; function decimalToHex(d, padding) { var hex = Number(d).toString(16); padding = typeof (padding) === "undefined" || padding === null ? padding = 2 : padding; while (hex.length < padding) { hex = "0" + hex; } return hex; } function normalize(max, min, value) { var normalized = (value - min) / (max - min) ; return Math.floor(normalized * normalize_base); } function value2Color(value) { if(value <= 0 || value == undefined) { return no_con_color; } var g = 0; var b = 0; var r = 0; if(value < 255) { r = 255; g = value; b = value; } else { r = (2*255) - value; g = 255; b = (2*255) - value; } return "#" + decimalToHex(r) + decimalToHex(g) + decimalToHex(b); }
Для этого есть I2UI .
<div data-i2="color:['#404040','#00FF21']"> <span data-i2="rate:1">A</span> <span data-i2="rate:2">B</span> <span data-i2="rate:3">C</span> <span data-i2="rate:4">D</span> <span data-i2="rate:5">E</span> </div>
Существует цветовой диапазон: от «Серый» – до «Зеленый». Элемент span, который имеет самое низкое значение скорости, получает цвет «Серый», элемент с наибольшей скоростью получает «зеленый» цвет.
Таким образом, диапазон, который находится между краями, получает цвет, который имеет прямое отношение к его скорости.
Кроме того, вызовите JavaScript i2.emph () после загрузки предыдущего HTML.
См. Демонстрацию
Значения цветов представляют собой представления. Числовые цвета, а также шестнадцатеричные цвета. Цвет «без оттенков серого» содержит как минимум две различные информации: красное значение, зеленое значение или синие значения могут отличаться. Выполнение операции над ее представлением дает неправильный результат. Затем необходимо отобразить «Картирование» для каждой части информации. Вам нужно извлечь красные, зеленые и синие значения, выполнить сопоставление отдельно, а затем создать представление цвета результата. Вот быстрый помощник, который использует «минимальный цвет» »и« max color », выполняет сопоставление по красным, зеленым и синим значениям в соответствии с« n »значением, с которым вам нужно работать, а затем возвращать цвет результата в шестнадцатеричной строке. Он также работает для любых цветов или цветов серого цвета ,
function linear_color($from, $to, $ratio) { // normalize ralio $ratio = $ratio<0?0:($ratio>1?1:$ratio); // unsure colors are numeric values if(!is_numeric($from))$from=hexdec($from); if(!is_numeric($to))$to=hexdec($to); $rf = 0xFF & ($from >> 0x10); $gf = 0xFF & ($from >> 0x8); $bf = 0xFF & $from; $rt = 0xFF & ($to >> 0x10); $gt = 0xFF & ($to >> 0x8); $bt = 0xFF & $to; return str_pad( dechex(($bf + (($bt-$bf)*$ratio)) + ($gf + (($gt-$gf)*$ratio) << 0x8) + ($rf + (($rt-$rf)*$ratio) << 0x10)), 6,'0',STR_PAD_LEFT); }
Просто укажите 2 цвета как числовое значение или шестнадцатеричную строку (без hash!), Например:
$color_from = hexdec('c2c2c2'); $color_to = hexdec('1eb02b'); for($i=-0.2; $i<=1.3; $i+=0.04){ echo '<div style="background-color: #'; echo linear_color($color_from, $color_to, $i); echo '">'; echo 'Result color when n = <strong>'.$i.'</strong>'; echo '</div>'; }