Question

实际上，我试图创建一个热图，以显示在热图中执行每个任务所花费的时间。因此，基本上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

});

但是它没有正确显示。

Answer 1

在heatmap图表类型中，每个点都占用相同的空间，因此值数据只能用颜色或标签表示。如果使用datetime xAxis类型，则必须记住设置正确的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

Highchart热图在时间上绘制x轴，在字符串上绘制y轴

1 个答案: