javascript - 将第三种颜色级别添加到 Javascript/JQuery HTML 表格热图中

Question

我通过以下方式使用 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

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

Answer 1

红色(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;