Heatmap js min Wert 0

Question

Ich versuche, die Heatmap mit 'Heatmap js' Bibliothek zu plotten. Bei einem Wert von Eingängen, wenn der min Wert 0 ist und der maximale Wert 1 ist, wird die ganze Heatmap rot anstatt die tatsächlichen Werte zu plotten. Es funktioniert gut, wenn der maximale Wert nicht 1 ist (zB min: 0, max 2 oder min: 0, max: 3), aber nur für diesen Fall kann die Heatmap die Daten nicht abbilden.

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

Wenn ich das richtig das Problem verstehen, dann denke ich Script 0 verstehen = false und 1 = true, so dass Sie weitergeben 0 als "0" und 1 als "1" benötigen

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>