Question

我尝试创建一个热图，其中第一列是一组绝对值，后续列是从第一列开始的百分比变化。

不幸的是，这导致热图的颜色和比例倾斜。我希望做的是找到一些我可以设置的属性，这些属性将导致值不被用于扭曲最小值/最大值。

基于另一个问题，我想如果我指定的颜色不会使轴偏斜，但我的小提示则表示不然。

以下是我目前正在尝试对数据进行编码的方式，这会导致最小/最大偏斜和偏斜色标：

series: [{
  data: [
    {x: 0, y: 0, value: 120, color: '#FFFFFF'}, 
    {x: 0, y: 1, value: 130, color: '#FFFFFF'},
    {x: 1, y: 0, value: 0.435},
    {x: 1, y: 1, value: 0.775},
    {x: 2, y: 1, value: 80}, // just to show they are in the middle of the range
    {x: 2, y: 1, value: 15},
  ],
  dataLabels: {
    enabled: true,
    formatter: function() { 
      return `${Math.round(this.point.value * 10) / 10} ${this.point.x ? '%' : ''}`; 
    }
}]

此热图是较大图表应用程序的一部分，我不一定知道值的域可能太不同，以便提前确定最小值/最大值。我更喜欢让highcharts找出大多数细胞的最小/最大和颜色。

Answer 1

您可以在将数据传递给图表构造函数之前准备好这样的数据：

data: (function() {

      data.forEach(function(p) {
        if (p.x > 0) {
          var basePoint = data.find((p_) => p_.x === 0 && p_.y === p.y);
          p.originalValue = p.value;
          p.value = p.value * basePoint.value;
        }

      });
            return data;

    })()

我计算了每个点的实际值，并将其用作value属性。我在percentValue属性中保存了百分比，以便稍后在dataLabels.formatter中使用它（它应该在工具提示格式化器中类似地使用）。

实时工作演示： http://jsfiddle.net/kkulig/vbgxscgt/

现在所有的点都在相同的比例和颜色轴上正常工作。

在Highcharts热图中，是否可以忽略颜色标度的数据点？

1 个答案: