如何使热图上的颜色以比例值显示？

Question

有人可以看看我的 jsFiddle 示例，让我知道为什么热图图表上的颜色似乎与值不成比例吗？我希望将一些重大变化传播到图表中。

此外，如何调整工具提示，使 x、y 值的格式与轴值的格式相同？

  var data1 = Papa.parse(document.getElementById('data1').innerHTML);
  var data2 = Papa.parse(document.getElementById('data2').innerHTML);

  function convertDataFromCsv(data) {
    var convData = [];
    data.forEach(function(elem) {
      convData.push({
        x: parseFloat(elem[0]),
        y: parseFloat(elem[1]),
        z: parseInt(elem[2])
      });
    });
    return convData;
  }
  Highcharts.chart('heatmap_container', {
    chart: {
      type: 'heatmap'
    },
    xAxis: {
      labels: {
        formatter: function() {
          let seconds = this.value * 5;
          let t = new Date(1900, 1, 1, 9, 30, 0);
          t.setSeconds(t.getSeconds() + this.value * 5);
          return `${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`
        }
      },
      tickInterval: 2
    },
    yAxis: {
      labels: {
        formatter: function() {
          return `${this.value/100}`;
        }
      }
    },
    legend: {
      align: 'right',
      margin: 0,
      verticalAlign: 'middle',
      symbolHeight: 300
    },
    colorAxis: [{
      type: 'logarithmic',
      reversed: false,
      layout: 'vertical',
      maxColor: '#d52120',
      minColor: '#ffffff',
      min: 1,
      max: 100000,
    }, {
      type: 'logarithmic',
      reversed: false,
      layout: 'vertical',
      maxColor: '#1d843d',
      minColor: '#ffffff',
      min: 1,
      max: 100000,
    }],
    series: [{
      nullColor: '#EFEFEF',
      color:'#d52120',
      data: convertDataFromCsv(data1.data),
      turboThreshold: Number.MAX_VALUE
    }, {
      nullColor: '#EFEFEF',
      color:'#1d843d',
      data: convertDataFromCsv(data2.data),
      turboThreshold: Number.MAX_VALUE
    }, {
      colorAxis: 1
    }]
  });

当前颜色： 例如，我看到相同的红色和绿色。

想要的颜色： 绿色和红色应该从浅到深与值成比例，如下所示

更新：

这是使用 z 值从 CSV 文件导入数据时图表的样子：

https://jsfiddle.net/samwhite/4w8r7chn/1/

Answer 1

使用value代替z 属性:

  function convertDataFromCsv(data) {
    var convData = [];
    data.forEach(function(elem) {
      convData.push({
        x: parseFloat(elem[0]),
        y: parseFloat(elem[1]),
        value: parseInt(elem[2])
      });
    });
    return convData;
  }

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

API参考：https://api.highcharts.com/highcharts/series.heatmap.data

如何使热图上的颜色以比例值显示？

How to make the colors on the heatmap chart to make it appear with scale values?

javascript

jquery

heatmap

highcharts