Highchart熱圖在時間上繪制x軸，在字符串上繪制y軸

Question

實際上，我試圖創建一個熱圖，以顯示在熱圖中執行每個任務所花費的時間。 因此，基本上x軸將具有日期時間格式的時間.y軸將具有每個任務名稱，每個點將具有執行任務所花費的時間的值。 簡單地說，我已經格式化了我的json格式，其中數據以格式輸入

[{datetime,stage name,value}]

所以我的xCategory看起來像

xCategory=[1527657415000,..some datetime]

我的yCategory是yCategories = [“ Stage” ...]和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