일주일간 15분 단위로 데이터 넣기 highchart 1week data (every 15 minutes)

챗지피티랑 스무번은 넘게 대화하면서 겨우 겨우 만든 소스

 

See the Pen highchart 1week data (evety 15 minutes) by publisher.kim (@publisherkim) on CodePen.

 

 

* 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js)

// x축 카테고리, 데이터 생성
var data = [];
var dayLabels = ["월요일", "화요일", "수요일", "목요일", "금요일", "토요일", "일요일"];
for (var day = 0; day < 7; day++) {
  for (var hour = 0; hour < 24; hour++) {
    for (var minute = 0; minute < 60; minute += 15) {
      var time = day * 24 * 60 + hour * 60 + minute;
      var dayLabel = dayLabels[day];
      var hourFormatted = (hour < 10 ? '0' : '') + hour;
      var minuteFormatted = (minute < 10 ? '0' : '') + minute;
      var formattedTime = dayLabel + " " + hourFormatted + ":" + minuteFormatted;
      var value = Math.floor(Math.random() * (8001 - 6000) + 6000); // 6000부터 8000 사이의 랜덤값 생성
      data.push([formattedTime, value]);
    }
  }
}

// chart
Highcharts.chart('chart', {
  chart: {
    type: 'spline',
    marginTop: 10,
    marginBottom: 80,
    marginLeft: 80,
    marginRight: 30,
  },
  xAxis: {
    categories: dayLabels.map(function(dayLabel) {
      return Array.from({
        length: 24 * 4
      }, function(_, i) {
        var hour = Math.floor(i / 4);
        var minute = (i % 4) * 15;
        return dayLabel + " " + (hour < 10 ? '0' : '') + hour + ":" + (minute < 10 ? '0' : '') + minute;
      });
    }).flat(),
    labels: {
      rotation: 0,
      x: 0,
      y: 20,
      step: 96, // 하루에 한 번 라벨 표시
      formatter: function() {
        // 끝에서부터 6글자를 삭제
        return this.value.slice(0, -6);
      }
    },
  },
  series: [{
    name: '시리즈1',
    data: data
  }]
});