Тепловая карта старшего разряда по дням в месяце с 8:00 до 17:00

Question

Я пытаюсь создать тепловую карту между 6/21 и 7/21 (по оси X) и с 8:00 до 17:00 по оси Y.

Я попробовал приведенный ниже код, но не могу понять, как разделить часы с 8:00 до 17:00.Кроме того, метки оси X отображаются в названии месяца, вместо этого я хотел бы видеть дату, например, «6/21»

Мои данные будут выглядеть так:

6/21, 08:00, 300
6/21, 09:00, 210
6/21, 10:00, 150
6/21, 11:00, 100
6/21, 12:00, 200
6/21, 13:00, 350
6/21, 14:00, 390
6/21, 15:00, 110
6/21, 16:00, 350
6/21, 17:00, 300
6/22, 08:00, 210
6/22, 09:00, 210
6/22, 10:00, 250
6/22, 11:00, 100
6/22, 12:00, 200
6/22, 13:00, 350
6/22, 14:00, 190
6/22, 15:00, 310
6/22, 16:00, 150

И так далее (до 7/21), дата должна быть на оси X, а время должно быть на оси Y

    Highcharts.chart('container', {

  data: {
    csv: document.getElementById('csv').innerHTML
  },

  chart: {
    type: 'heatmap',
    margin: [60, 10, 80, 50]
  },

  boost: {
    useGPUTranslations: true
  },

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

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

  xAxis: {
    type: 'datetime',
    min: Date.UTC(2017, 5, 21),
    max: Date.UTC(2017, 6, 20 ),
    //xAxis.max : Date.UTC(2017, 6, 7 ), 
    labels: {
      align: 'left',
      x: 5,
      y: 14,
      format: '{value:%B}' // long month
    },
    showLastLabel: false,
    tickLength: 16
  },

  yAxis: {
    min: Time.
    title: {
      text: null
    },
    labels: {
      format: '{value}:00'
    },
    minPadding: 0,
    maxPadding: 0,
    startOnTick: false,
    endOnTick: false,
    tickPositions: [0, 6, 12, 18, 24],
    tickWidth: 1,
    min: 0,
    max: 23,
    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: [{
    boostThreshold: 100,
    borderWidth: 0,
    nullColor: '#EFEFEF',
    colsize: 24 * 36e5, // one day
    tooltip: {
      headerFormat: 'Temperature<br/>',
      pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>'
    },
    turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
  }]

});

Answer 1

Проанализировав способ отображения данных, я думаю, что будет лучше остановиться на категорированных осях. Ниже вы можете найти пример, как преобразовать ваши данные для этого решения:

data: {
    csv: document.getElementById('csv').innerHTML,
    parseDate: function(el) {
        var splitted = el.split('-');
        if (splitted.length === 2) {

            return splitted[0] == '6' ? Number(splitted[1]) - 21 : Number(splitted[1]) + 10;
        }
        return true
    },
    parsed: function(data) {
        var splitted;

        Highcharts.each(data[1], function(el, i) {
            if (i > 0) {
                data[1][i] = parseInt(el) - 8;
            }
        });
    }
}

Демонстрация в реальном времени: http://jsfiddle.net/BlackLabel/srzp6f8y/

Справочник по API: https://api.highcharts.com/highcharts/data

Answer 2

Как показал @ppotaczek со своей скрипкой, лучше использовать datetime по всей оси datetime.Но для этого нам нужен способ изменить «18:00» на дату и время в миллисекундах.Мы можем отформатировать весь входящий CSV с помощью функции beforeParse.

Это можно сделать так:

beforeParse: function(e) {
  let csv = e.split('\n'); //split by newline
  let processedTable = []

  for (let i = 0; i < csv.length; i++) {
    let row = csv[i].split(', '); 
    if (row.length != 3) //skip empty rows or rows with more/less columns
      continue;
    processedTable.push(
      (new Date(2018, row[0].split('/')[0] - 1, row[0].split('/')[1], 0, 0, 0)).getTime() + ', ' + //get the timestamp for the date (assuming 2018)
      (new Date(1970, 0, 1, row[1].split(':')[0], 0, 0)).getTime() + ', ' + //use 1970 as the date for the time axis, since we are not interested in the date, but only the hours
      row[2]
    )
  }
  return processedTable.join('\n') //join the array into a string again
},

В дополнение к этому, я удалил множество параметров конфигурации, которые были установлены.Особенно Яксис.Но основные моменты

yAxis: {
  type: 'datetime',
  ...
}, 
colorAxis: {
  min: 0,
  max: 400,
  ...
},
series: {
  colsize: 24 * 36e5, // one day
  rowsize: 36e5, //one hour
  ...
}

Highcharts.chart('container', {
  data: {
    csv: document.getElementById('csv').innerHTML,
    firstRowAsNames: false,
    beforeParse: function(e) {
      let csv = e.split('\n');
      let processedTable = []

      for (let i = 0; i < csv.length; i++) {
        let row = csv[i].split(', ');
        if (row.length != 3)
          continue;
        processedTable.push(
          (new Date(2018, row[0].split('/')[0] - 1, row[0].split('/')[1], 0, 0, 0)).getTime() + ', ' +
          (new Date(1970, 0, 1, row[1].split(':')[0], 0, 0)).getTime() + ', ' +
          row[2]
        )
      }
      return processedTable.join('\n')
    },
  },

  chart: {
    type: 'heatmap',
    margin: [60, 10, 80, 50]
  },

  boost: {
    useGPUTranslations: true
  },

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

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

  xAxis: {
    type: 'datetime',

    //xAxis.max : Date.UTC(2017, 6, 7 ), 
    labels: {
      align: 'left',
      x: 5,
      y: 14,
      format: '{value:%B}' // long month
    },
    showLastLabel: false,
    tickLength: 16
  },

  yAxis: {
    type: 'datetime',
    title: {
      text: null
    },
    labels: {
      //format: '{value}:00'
    },

  },

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

  series: [{
    borderWidth: 0,
    nullColor: '#EFEFEF',
    colsize: 24 * 36e5, // one day
    rowsize: 3600*1000,
    tooltip: {
      headerFormat: 'Temperature<br/>',
      pointFormat: '{point.x:%e %b, %Y} {point.y: %H:%M} <b>{point.value} ℃</b>'
    },
  }]
});

6/21, 08:00, 300
6/21, 09:00, 210
6/21, 10:00, 150
6/21, 11:00, 100
6/21, 12:00, 200
6/21, 13:00, 350
6/21, 14:00, 390
6/21, 15:00, 110
6/21, 16:00, 350
6/21, 17:00, 300
6/22, 08:00, 210
6/22, 09:00, 210
6/22, 10:00, 250
6/22, 11:00, 100
6/22, 12:00, 200
6/22, 13:00, 350
6/22, 14:00, 190
6/22, 15:00, 310
6/22, 16:00, 150

Рабочий пример: https://jsfiddle.net/ewolden/9ejLwfut/