1

我正在尝试使用 'heatmap js' library 绘制热图。对于某些输入值，如果最小值为 0，最大值为 1，则整个热图将变为红色，而不是绘制实际值。如果最大值不是 1（例如 min: 0, max 2 或 min:0 , max: 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>

4

1 回答 1

1

如果我正确理解您的问题，那么我猜脚本理解 0 = false 和 1 = true 所以您需要将 0 作为“0”传递，将 1 作为“1”传递

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>

于 2017-08-22T12:37:35.157 回答