Highcharts 向树映射添加条件颜色

正在尝试向热图添加颜色。颜色基于具有以下条件的值

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)

---

您定义的点的值，实际上应该是点的

颜色值
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'
}]
},

转换数据的示例：

具有相同大小的点的示例：
但您的演示是树形图，而不是热图？无论如何，您需要使用来定义这些步骤。顺便说一句，当值为例如0.01时会发生什么？还是-0.4？下面是一个简单的例子：0.01将四舍五入为零。好的，在绘制图表之前不要忘记对数据进行四舍五入。因为其他值为负数或零。这些值应始终为正值，以便正确计算树。您可以在上创建一个想法。至于解决方法，我将始终使用正值，并使用工具提示格式化程序来显示实际值。您能否使框的大小与其值成比例，例如，值为0.20的框将比值为0.30的框小，等等，如您在中看到的，它们是成比例的-如果您在开发工具中调查它们的像素大小，他们会有所不同。构建长方体大小和位置的主要因素是布局算法-如果您对大小差异不满意，可以创建自己的算法-请参见此处的算法部分“转换数据”和“相同大小”示例之间的差异是什么？注意，第一个示例没有显示“东南亚”“相同大小”具有相同大小=宽度*长度的框，在转换数据中，大小=宽度*长度根据点的值具有不同的值。1）在转换数据版本（第一个）中看不到“东南亚”。2） 请注意，当框变小时，标签是如何消失的。这种行为是“切片和骰子”算法的默认行为吗？