Верхняя диаграмма тепловой карты строит ось X по времени и ось Y в строке - PullRequest
Новая
       26

Верхняя диаграмма тепловой карты строит ось X по времени и ось Y в строке

0 голосов
/ 03 октября 2018

На самом деле, я пытался создать тепловую карту, которая будет отображать время выполнения каждой задачи в тепловой карте.Таким образом, в основном у оси x будет время в формате datetime. У оси 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

});

Но он не подходит должным образом.

1 Ответ

0 голосов
/ 03 октября 2018

В 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

...