PHP＆amp; AJAX：如何根据数值生成热图？

Question

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

here is my fiddle for better understanding每个方格都是DIVS。 正在使用AJAX调用检索其内部的数字，该调用使用PHP脚本执行它 一个问题。

问题：

我如何制作热图＆＃34;根据显示的数字。 示例：假设数字范围从100（最低）到1800（最高）。 根据数字范围，必须显示背景颜色 green-ish，yellow-ish，orange-ish，red ......等等。

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>