Javascript 如何使热图图表上的颜色与比例值一起显示？

有人能看一下我的JSFIDLE示例，让我知道为什么热图上的颜色看起来不与值成比例吗？有一些重大的变化，我希望传播到图表中

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

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

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

---

更新：

这是使用

z

值从CSV文件导入数据时图表的外观：

---

使用

值

而不是

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;
  }

---

现场演示：

---

API参考：

非常感谢您的回复，@ppotaczek。当数据在html中定义时，我看到z值达到了我想要的效果。但是，当我尝试从CSV文件导入数据并对其进行解析时，z值并没有达到预期效果。你能看一下这个并告诉我这个问题吗？还更新了问题的图片图表，它看起来如何从CSV文件导入数据时使用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;
  }