1

我通过以下方式使用 HTML 表热图 JQuery 脚本：

http://www.designchemical.com/blog/index.php/jquery/jquery-tutorial-create-a-flexible-data-heat-map/

我已经能够修改它并清理它并使用我们的数据集。但是，当前脚本仅允许使用两种颜色，并且不计算具有标准偏差的介质以包含第三种颜色，例如黄色。

这是下面的当前脚本：

<script type="text/JavaScript">
    $(document).ready(function () {
        // Function to get the Max value in Array
        Array.max = function (array) {
            return Math.max.apply(Math, array);
        };

        // get all values
        var counts = $('.heatmap tbody td').not('.first_row').map(function () {
            return parseInt($(this).text().replace(/,/g, "").replace(/\(|\)/g, ""));
        }).get();

        // return max value
        var max = Array.max(counts);

        // red color for lowest data
        xr = 251;
        xg = 121;
        xb = 105;

        // green color for highest data
        yr = 138;
        yg = 251;
        yb = 107;
        n = 100;

        // add classes to cells based on nearest 10 value
        $('.heatmap tbody td').not('.first_row').each(function () {
            var val = parseInt($(this).text().replace(/,/g, "").replace(/\(|\)/g, ""));
            var pos = parseInt((Math.round((val / max) * 100)).toFixed(0));
            red = parseInt((xr + ((pos * (yr - xr)) / (n - 1))).toFixed(0));
            green = parseInt((xg + ((pos * (yg - xg)) / (n - 1))).toFixed(0));
            blue = parseInt((xb + ((pos * (yb - xb)) / (n - 1))).toFixed(0));
            clr = 'rgb(' + red + ',' + green + ',' + blue + ')';
            $(this).css({
                backgroundColor: clr
            });
        });
    });
</script>

热图当前从红色变为绿色，我想添加一个计算，为中等范围添加黄色。我在这里创建了一个 jsFiddle：http: //jsfiddle.net/7z8D4/，其中包含我正在使用的脚本和热图表结构。

例如，如果我有以下数据集，它应该是彩色的，例如：

1      red
2      red
3      pink
4      pink
5      yellow
6      yellow
7      lime green
8      lime green
9      green
10     green

我非常感谢对此的任何见解。:)

4

3 回答 3

2

红色（0%）到黄色（50%）到绿色（100%）

var pos = val / (max * 1.0);

red =  Math.round(pos < 0.5 ? 255 : ((1 - pos) * 2) * 255);
green = Math.round(pos < 0.5 ? (pos * 2) * 255 : 255);
blue = 0;
于 2013-03-15T15:26:00.077 回答
0

我创建了一个非常简单的 JavaScript 函数（请参阅http://jsfiddle.net/4vCfc/），它在红色到黄色和蓝色渐变上提供 RGB 颜色，我将其用于热图来演示字段的使用以一种形式。

这是函数定义：

function getHeatColorAsRbg(percentage) //percent is a number between 0 and 1.
{
//RED - YELLOW (255, 0, 0) to (255, 255, 0)
//THEN YELLOW TO BLUE (255,255,0) to (0, 0, 255)
var red = 0;
var blue = 0;
var green = 0;

//Two cases - 1.0 down to 0.5 and 0.5 down to 0.

if(percentage >= 0.5)
{
    red = 255;
    green = Math.round(255 * 2 * (1 - percentage));
    blue = 0;
}
else
{
    blue = 255 - Math.round((percentage/0.5)*255);
    red = 255 - blue;
    green = red;
}

return "rgb(" + red + "," + green + "," + blue + ")";

}

于 2013-03-28T01:33:48.907 回答
0

如果没有找到数组中的最小值，您的方法只是半方法。））

于 2016-05-26T21:17:20.803 回答