具有自定义数据的热图无法显示任何内容

Question

您好，我正在尝试使用我自己的数据创建一个热图，但是这些数据将通过 API 请求加载。我没能这样做。我已经看到其他人使用随机生成数据但不是我的格式化数据的函数获取数据。我不知道出了什么问题或我错过了什么。如果有人能指出下面的代码有什么问题。谢谢！

https://jsfiddle.net/4o8f5qmp/2/

var test = Highcharts.chart('container',{
    chart: {
  type: 'heatmap',
  margin: [60, 10, 80, 50]
},


title: {
    text: 'Highcharts extended heat map',
   align: 'left',
  x: 40
},

subtitle: {
  text: 'Temperature variation by day and hour through 2013',
  align: 'left',
  x: 40
},

 xAxis: {
  type: 'datetime'
},

yAxis: {
  title: {
      text: null
  },
  labels: {
      format: '{value}'
  },
  minPadding: 0,
  maxPadding: 0,
  startOnTick: false,
  endOnTick: false,
  tickWidth: 1,
  reversed: true
},

colorAxis: {
  stops: [
      [0, '#3060cf'],
      [0.5, '#fffbbc'],
      [0.9, '#c4463a'],
      [1, '#c4463a']
  ],
  min: -15,
  max: 25,
  startOnTick: false,
  endOnTick: false,
  labels: {
      format: '{value}℃'
  }
},

series: [{
  borderWidth: 0,
  nullColor: '#EFEFEF',
  colsize: 168* 36e5, // one hour
  tooltip: {
      headerFormat: 'Temperature<br/>',
      pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>'
  },
  data: (function(){
    var data = []
    rawData.forEach( item=> {
    var splitedDateTime = item.PollTimeStamp.split('T');
    var time = splitedDateTime[1].substring(0,splitedDateTime[1].length - 2);
    time = time+'00';
    
    var tempArray = [splitedDateTime[0],time,item.VarValue]
    data.push(tempArray)
  })
  /* console.log(data) */
  return data 
  }()),
    turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
}]

});

Answer 1

控制台中出现 Highcharts 错误 #14：https://assets.highcharts.com/errors/14/

不能使用字符串作为x和y值，需要适配Highcharts要求的数据格式。您可以使用分类轴类型以您想要的方式显示标签。示例：

const xCategories = [];
const yCategories = [];
var data = [];

rawData.forEach(item => {
    var splitedDateTime = item.PollTimeStamp.split('T');
    var time = splitedDateTime[1].substring(0, splitedDateTime[1].length - 2);
    time = time + '00';

    const matchedXCat = xCategories.find(cat => cat === splitedDateTime[0]);
    const matchedYCat = xCategories.find(cat => cat === time);
    let x;
    let y;

    if (matchedXCat) {
        x = xCategories.indexOf(matchedXCat);
    } else {
        xCategories.push(splitedDateTime[0]);
        x = xCategories.length - 1;
    }

    if (matchedYCat) {
        y = yCategories.indexOf(matchedYCat);
    } else {
        yCategories.push(time);
        y = yCategories.length - 1;
    }

    var tempArray = [x, y, item.VarValue];

    data.push(tempArray)
})

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

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

具有自定义数据的热图无法显示任何内容

Heatmap With Custom Data Cannot Display anything

heatmap

highcharts