Highcharts 热图在时间上绘制 x 轴，在字符串上绘制 y 轴答案

【问题标题】：Highchart heatmap plot x-axis on time and y-axis on stringHighcharts 热图在时间上绘制 x 轴，在字符串上绘制 y 轴
【发布时间】：2018-10-03 12:23:55
【问题描述】：

实际上，我正在尝试创建一个热图，它会在热图中显示执行每个任务所花费的时间。所以基本上 x 轴将有日期时间格式的时间。y 轴将有每个任务名称，每个点都有值，即执行任务所花费的时间。简单来说，我已经格式化了我的 json 格式的数据

[{datetime,stage name,value}]

所以我的 xCategory 看起来像

xCategory=[1527657415000,..some datetime]

我的 yCategory 是 yCategories=["阶段"...] 和 series.data=[[0,0,12],[0,1,12]..]

我的图表

  var chart = new Highcharts.Chart('chart', {
chart: {
  type: 'heatmap'
},

xAxis: {
//  categories: xCategories,
 type: 'datetime',
 dateTimeLabelFormats:
  {
    month: '%e. %b',
    year: '%b'
  },

 },

 yAxis: {
//  categories: yCategories
},

plotOptions: {
 series: {
   colorByPoint: true
  }
},

 series: series

});

但它没有正确出现。

【问题讨论】：

我不太确定您已决定使用类别还是日期时间？此外，“没有正确出现”也没有很好的定义。发生了什么/没有发生什么，您是否收到任何错误输出？
@HalvorStrand 我正在绘制日期时间。在 x 轴日期时间正确出现但在 y 轴上除了一些随机数之外什么都没有出现。HighChart 的新手，不知道我在做什么

标签： javascript highcharts heatmap

【解决方案1】：

在heatmap图表类型中，每个点占据相同的空间，所以数值数据只能用颜色或标签来表示。如果使用datetimexAxis类型，一定要记得设置正确的colsize属性。

Highcharts.chart('container', {
    chart: {
        type: 'heatmap',
        plotBorderWidth: 1
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
        title: null
    },
    colorAxis: {
        min: 0,
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
    },
    series: [{
        name: 'Sales per employee',
        borderWidth: 1,
        colsize: 60 * 60 * 1000,
        data: [
            [1527657415000, 0, 10],
            [1527657415000, 1, 19],
            [1527657415000, 2, 8],
            [1527657415000, 3, 24],
            [1527657415000, 4, 67],
            [1527661015000, 0, 92],
            [1527661015000, 1, 58],
            [1527661015000, 2, 78],
            [1527661015000, 3, 117],
            [1527661015000, 4, 48],
            [1527661015000, 0, 35],
            [1527661015000, 1, 15],
            [1527661015000, 2, 123],
            [1527661015000, 3, 64],
            [1527661015000, 4, 52],
            [1527664615000, 0, 72],
            [1527664615000, 1, 132],
            [1527664615000, 2, 114],
            [1527664615000, 3, 19],
            [1527664615000, 4, 16]
        ],
        dataLabels: {
            enabled: true,
            color: '#000000'
        }
    }]
});

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

API：https://api.highcharts.com/highcharts/series.heatmap.colsize

【讨论】：