热图js最小值为0

Question

我正在尝试使用＆＃39; heatmap js＆＃39;来绘制热图。图书馆 。 对于某些输入值，如果最小值为0且最大值为1，则整个热图将为红色而不是绘制实际值。 如果最大值不是1（例如min：0，max 2或min：0，max：3），它可以正常工作，但仅在这种情况下，热图无法映射数据。

＆＃13;

＆＃13;

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();

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果我理解你的问题，那么我想脚本理解0 =假，1 =真，所以你需要传递0作为＆＃34; 0＆＃34;和1作为＆＃34; 1＆＃34;

＆＃13;

＆＃13;

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();

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;