javascript - PHP 和 AJAX : How to produce a heat map based on number values?

Question

我正在尝试一些我以前从未做过的新事物。我在网上到处搜索，找不到任何教程。

here is my fiddle for better understanding这些方 block 中的每一个都是 DIVS。正在使用 AJAX 调用检索其中的数字，该调用通过执行 PHP 脚本获取它一个问题。

问题:

如何根据显示的数字生成“热图”。示例:假设数字范围是从 100(最低)到 1800(最高)。根据数字范围，必须显示背景色绿色、黄色、橙色、红色……等等。

AJAX:我如何在 DIV 中显示数字

<script type="text/javascript">
            $(document).ready(function() {
                $('#aht').click(function(){
                    $.ajax({
                    type:"GET",
                    url : "show_aht.php",
                    data:{  } , // do I need to pass data if im GET ting?
                    dataType: 'json',
                    success : function(data){
                        //going through all DIVs only once with this loop
                            for(var i = 0; i < data.length; i++) { // loop over results
                            var divForResult = $('#desk_' + data[i]['station']); // look for div for this object
                            if(divForResult.length) { // if a div was found

这是我输出数字的地方

      divForResult.html(data[i]['aht_value']); // set inner HTML with AHT value


                            }//end if
                            }//end for
                      }//end success
                });//end ajax
              });//end click
            });//end rdy
        </script>

从中检索的 PHP 编号

$result = array();
    foreach ($memo as $username => $memodata) {
    if (in_array($username, array_keys($user))) {
    // Match username against the keys of $user (the usernames) 
    $userdata = $user[$username];
    //if AHT is null give N/A as value
    if (is_null($memodata['aht_value'])) {
        $result[] = array( 'username'  => $userdata['username'],
                                             'aht_value' => 'NA',
                                             'station'  => $userdata['station']
                                            );
    }//end inner if 
    //else give the actual value of AHT without the decimals
    else {
        $result[] = array( 'username'  => $userdata['username'],
                                             'aht_value' => substr($memodata['aht_value'],0,-3),
                                             'station'   => $userdata['station']
                                            );
    }//end else
    }//end outer if
    }//end for

echo json_encode($result);

Answer 1

如果您不介意使用 HSL 颜色，这里有一个我经常使用的函数来快速生成热图。首先让您的输入进入 [0,1] 范围。

// value [0,1]
function heatmap_color_for(value) {
  var h = (1 - value) * 100;
  var s = 100;
  var l = value * 50;

  return 'hsl('+h.toFixed(2)+', '+s.toFixed(2)+'%, '+l.toFixed(2)+'%)';
}

演示:

  // value [0,1]
  function heatmap_color_for(value) {
    var h = (1 - value) * 100;
    var s = 100;
    var l = value * 50;
    
    return 'hsl('+h.toFixed(2)+', '+s.toFixed(2)+'%, '+l.toFixed(2)+'%)';
  }

  $('div').each(function (i,item) {
    $(this).css('background-color', heatmap_color_for(Math.random()))
  })

div {
        width:30px;
        height:30px;
        float:left;
        margin:3px;
        border: 1px solid black;
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>