Значение карты для цветовой шкалы

Question

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

пример и мое решение до сих пор, чтобы нормализовать значения, основанные на min и max, а затем назначить их шестнадцатеричный цвет 0 для самых низких и 255 для самых высоких. Это, конечно, ограничивает мое «я» серой шкалой. Вот код:

$color = ($value/$max) * 255 // (min is zero) 

Но как это сделать, если значения должны идти от синего до красного, например? Есть ли общие библиотеки или инструменты, которые могут решить эту проблему? Пока я не смог найти никого.

Answer 1

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

1. Предопределенный индекс цвета, например. $coloridx=array(0=>'#FFFFFF',1=>'#FFEE00',...);
2. Любой алгоритм, например. линейный градиент, который в основном основан на итерациях на всех трех каналах RGB (R = красный, G = зеленый, B = синий).
3. Комбинация обоих, которая обычно выводит результат любого сложного алгоритма в индекс цвета, а затем идет оттуда.

Если включить алгоритмы в ваших соображений вы должны понять, что нет 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, который подает обратно на комментарии.

Answer 2

Другой ответ был очень полезен. Я решил использовать 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); 
} 

Answer 3

Для этого есть 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-кода.

demo См

Answer 4

цвета значения являются представлениями. Числовые цвета, а также шестнадцатеричные цвета. Цвет «без оттенков серого» содержит как минимум две различные информации: красное значение, зеленое значение или синие значения могут отличаться. Выполнение операции над ее представлением дает неправильный результат. Затем необходимо отобразить «Картирование» для каждой части информации. Вам нужно извлечь красные, зеленые и синие значения, выполнить сопоставление отдельно, а затем создать представление цвета результата. Вот быстрый помощник, который использует «минимальный цвет» »и« 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 цвета как числовое значение или шестнадцатеричную строку (без хэша!), как это:

$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>'; 
    }