如何使 Highcharts 热图 colors 不基于渐变/百分比，使颜色值范围基于

Question

我希望 colors 像 Gitlab 的贡献热图（左下角是颜色范围）：

// [value, color]
stops: [
    [0, '#ededed'],
    [1-9, '#acd5f2'],
    [10-19, '#7fa8c9'],
    [20-29, '#527ba0'],
    [30+, '#254e77']
]

任何人都知道如何使用 Highcharts 热图来做到这一点？

Answer 1

您需要为颜色轴使用数据类。 例如：

  colorAxis: {
    ...,
    dataClasses: [{
      color: '#ededed',
      to: 1
    }, {
      color: '#acd5f2',
      from: 1,
      to: 9
    }, {
      color: '#7fa8c9',
      from: 10,
      to: 19
    }, {
      color: '#527ba0',
      from: 20,
      to: 29
    }, {
      color: '#254e77',
      from: 30
    }]
  }

---

现场演示： https://jsfiddle.net/BlackLabel/9qd1Lewp/

API 参考： https://api.highcharts.com/highcharts/colorAxis.dataClasses