ヒートマップjs最小値0

Question

ヒートマップを 'heatmap js'ライブラリを使用してプロットしようとしています。 最小値が0で最大値が1の場合、入力値によってはヒートマップ全体が実際の値をプロットする代わりに赤色になります。 最大値が1以外（例：最小、0、最大2または最小：0、最大：3）であれば正常に動作しますが、この場合はヒートマップでデータをマップできません。

var data = null; 
 

 

 

 
/* this set of data works fine though */ 
 
values = [{ 
 
    "uid": "1", 
 
    "x": 100, 
 
    "y": 200, 
 
    "value": 0 
 
    }, 
 
    { 
 
    "uid": "2", 
 
    "x": 100, 
 
    "y": 220, 
 
    "value": 0 
 
    }, 
 
    { 
 
    "uid": "22", 
 
    "x": 100, 
 
    "y": 240, 
 
    "value": 0 
 
    }, 
 
    { 
 
    "uid": "30", 
 
    "x": 100, 
 
    "y": 260, 
 
    "value": 0 
 
    }, 
 
    { 
 
    "uid": "39", 
 
    "x": 100, 
 
    "y": 280, 
 
    "value": 0 
 
    }, 
 
    { 
 
    "uid": "70", 
 
    "x": 100, 
 
    "y": 300, 
 
    "value": 1 
 
    }, 
 
    { 
 
    "uid": "75", 
 
    "x": 120, 
 
    "y": 200, 
 
    "value": 0 
 
    }, 
 
    { 
 
    "uid": "84", 
 
    "x": 140, 
 
    "y": 200, 
 
    "value": 1 
 
    }, 
 
    { 
 
    "uid": "85", 
 
    "x": 160, 
 
    "y": 200, 
 
    "value": 1 
 
    }, 
 
    { 
 
    "uid": "104", 
 
    "x": 180, 
 
    "y": 200, 
 
    "value": 0 
 
    }, 
 
    { 
 
    "uid": "105", 
 
    "x": 200, 
 
    "y": 200, 
 
    "value": 0 
 
    } 
 
]; 
 

 

 
var heatmap = h337.create({ 
 
    container: $("#testcanvas").get(0) 
 
}); 
 
data = { 
 
    max: 1, 
 
    min: 0, 
 
    data: values 
 
} 
 
heatmap.setData(data); 
 

 
heatmap.repaint();

#testcanvas { 
 
    width: 600px; 
 
    height: 600px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/pa7/heatmap.js/master/build/heatmap.js"></script> 
 
<div id="testcanvas"></div>

Answer 1

私が正しくあなたの問題を理解していれば、私はあなたが "1"

として "0" として、0と1を渡す必要があるので、スクリプトは、0 =偽と1 =真の理解を推測明確化のため@Smit

var data = null; 
 

 

 

 
/* this set of data works fine though */ 
 
values = [{ 
 
    "uid": "1", 
 
    "x": 100, 
 
    "y": 200, 
 
    "value": "0" 
 
    }, 
 
    { 
 
    "uid": "2", 
 
    "x": 100, 
 
    "y": 220, 
 
    "value": "0" 
 
    }, 
 
    { 
 
    "uid": "22", 
 
    "x": 100, 
 
    "y": 240, 
 
    "value": "0" 
 
    }, 
 
    { 
 
    "uid": "30", 
 
    "x": 100, 
 
    "y": 260, 
 
    "value": "0" 
 
    }, 
 
    { 
 
    "uid": "39", 
 
    "x": 100, 
 
    "y": 280, 
 
    "value": "0" 
 
    }, 
 
    { 
 
    "uid": "70", 
 
    "x": 100, 
 
    "y": 300, 
 
    "value": "1" 
 
    }, 
 
    { 
 
    "uid": "75", 
 
    "x": 120, 
 
    "y": 200, 
 
    "value": "0" 
 
    }, 
 
    { 
 
    "uid": "84", 
 
    "x": 140, 
 
    "y": 200, 
 
    "value": "1" 
 
    }, 
 
    { 
 
    "uid": "85", 
 
    "x": 160, 
 
    "y": 200, 
 
    "value": "1" 
 
    }, 
 
    { 
 
    "uid": "104", 
 
    "x": 180, 
 
    "y": 200, 
 
    "value": "0" 
 
    }, 
 
    { 
 
    "uid": "105", 
 
    "x": 200, 
 
    "y": 200, 
 
    "value": "0" 
 
    } 
 
]; 
 

 

 
var heatmap = h337.create({ 
 
    container: $("#testcanvas").get(0) 
 
}); 
 
data = { 
 
    max: "1", 
 
    min: "0", 
 
    data: values 
 
} 
 
heatmap.setData(data); 
 

 
heatmap.repaint();

#testcanvas { 
 
    width: 600px; 
 
    height: 600px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/pa7/heatmap.js/master/build/heatmap.js"></script> 
 
<div id="testcanvas"></div>