Question

尝试为Heatmap添加颜色。颜色基于具有以下条件的值。

if value 'equals or less than': -3.0 (green)
if value less than or equal to' -1.0 (red)
if value equals zero (grey)
if value 'greater than or equal to' 0.1 (orange)
if value 'greater than or equal to' 3.0 (purple)

https://jsfiddle.net/d_paul/rq862nuv/

Answer 1

您定义为点值，实际上它应该是点colorValue。 value是有关其颜色的点大小colorValue的信息。 colorValue可能是负数 - 值不能。如果您希望点的大小取决于其颜色，则需要将colorValue比例转换为某个正比例，例如[1, 10]。

如果为点定义colorValue，则可以使用colorAxis.dataClasses并应用颜色。

var dataMin = points.filter(p => !isNaN(p.value)).reduce((min, p) => Math.min(min, p.value), Infinity);
var dataMax = points.filter(p => !isNaN(p.value)).reduce((max, p) => Math.max(max, p.value), -Infinity);

var newMin = 1;
var newMax = 10;

function transformValue (value) {
  return (newMax - newMin) * (value - dataMin) / (dataMax - dataMin) + newMin;
}

var transformedData = points.map(p => {
  var transformedPoint = Object.assign({}, p);

  if (p.value !== undefined) {
    transformedPoint.value = transformValue(p.value);
    transformedPoint.colorValue = p.value;
  }

  return transformedPoint;
});

colorAxis的类

  colorAxis: {
dataClasses: [{
  to: -3,
  color: '#00ff00'
}, {
  from: -3,
  to: -1,
  color: '#ff0000'
}, {
  from: 0,
  to: 0,
  color: '#000000'
}, {
  from: 0.1,
  to: 3,
  color: '#0000ff'
}, {
  from: 3,
  color: '#00ffff'
}]
},

转化数据的示例：https://jsfiddle.net/aepu6dvt/

具有相同大小的点的示例：https://jsfiddle.net/aepu6dvt/1/

向Treemap添加条件颜色

1 个答案: