根据MIN和MAX数组值更改DIV颜色背景？

In brief explanation, I am retrieving values from an array by using an AJAX call. Green to Red colors background will be displayed depending on the number "aht_value". The colors are being displayed correctly because I manually putted the values in the calculation below. That being said, in my "function conv(x)" I want the values to be dynamic.

简要说明一下,我是通过使用AJAX调用从数组中检索值的。将根据数字“aht_value”显示绿色到红色背景。颜色正确显示,因为我手动将值放在下面的计算中。话虽如此,在我的“函数conv(x)”中,我希望值是动态的。

Theres 3 things that I am trying to achieve in my code but can't get it to work. So, here is my fiddle for better understanding

我试图在我的代码中实现的3件事情却无法让它发挥作用。所以,这是我提供更好理解的小提琴

Fetch MIN and MAX value from the array in "aht_value". For later use in the conv(x) function.

从“aht_value”中的数组中获取MIN和MAX值。供以后在conv(x)函数中使用。

If aht_value is equal to "NA" display a white background.

如果aht_value等于“NA”,则显示白色背景。

Make the values not surpass the little squares.. how can I center them so the number doesnt overlap?

使值不超过小方块..我怎样才能使它们居中以使数字不重叠?

and here is an array example being retrieved from my "show_aht.php".

这是从我的“show_aht.php”中检索的数组示例。

Array:

[ 
  {
   "username":"OXGOR",
   "aht_value":"241",
   "station":"B20"
  }
  {
   "username":"AISAI2",
   "aht_value":"199",
   "station":"B21"
  },
  {
   "username":"CAPAP3",
   "aht_value":"NA",
   "station":"B10"
  }
 ]

AJAX call:

 <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

Here I output the background color and aht_value

这里我输出背景颜色和aht_value

                                divForResult.html(data[i]['aht_value']).css("background-color", colorMe(data[i]['aht_value']));
                            }//end if
                            }//end for
                    }//end success
                });//end ajax   
              });//end click
            });//end rdy

            //function for background color
            function colorMe(v){
                    return "rgb(" + conv(v) + "," + (255-conv(v)) + ",0)";
            }

here I want to check the lowest value from the array and highest to make the calculation I added 1800 as t he highest and 100 as the lowest but I want it to be the values from the array

在这里我想检查数组中的最低值和最高值以进行计算我将1800添加为最高,100为最低但我希望它是数组中的值

            //function for calculation of background color depending on aht value               
            function conv(x){
                return Math.floor((x - 100) / (1800-100) * 255);
            }

        </script>

1 个解决方案

#1

your json file is not valid. Ajax calls are using strict method, so if the json is not valid it will not get to your success function.

你的json文件无效。 Ajax调用使用严格的方法,因此如果json无效,它将无法进入您的成功函数。

try debugging the json file here first: http://jsonlint.com/

首先尝试调试json文件:http://jsonlint.com/

try using this json (fixed):

尝试使用这个json(固定):

[
  {
    "username": "OXGOR",
    "aht_value": "241",
    "station": "B20"
  },
  {
    "username": "AISAI2",
    "aht_value": "199",
    "station": "B21"
  },
  {
    "username": "CAPAP3",
    "aht_value": "NA",
    "station": "B10"
  }
]

#1