1

私は HTML テーブル ヒートマップ JQuery スクリプトを次の方法で使用しています。

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

私はそれを変更してクリーンアップし、データセットを操作することができました。ただし、現在のスクリプトでは 2 色しか使用できず、黄色などの 3 番目の色を含む標準偏差を使用してメディアを計算しません。

現在のスクリプトは次のとおりです。

<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

配列の最小値を見つけないと、メソッドは半分のメソッドになります。))

于 2016-05-26T21:17:20.803 に答える
0

フィールドの使用法を示すためにヒートマップに使用している、赤から黄、次に青の色のグラデーションに RGB カラーを提供する非常に単純な JavaScript 関数 ( http://jsfiddle.net/4vCfc/を参照) を作成しました。形で。

関数定義は次のとおりです。

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 に答える