Верхняя диаграмма с указанием даты и времени - PullRequest
0 голосов
/ 15 октября 2018

На диаграмме области старшей диаграммы мне нужно добавить дату по оси x и удар по времени по оси y.Его за удар вовремя студент в месяц.Таким образом, он имеет n значений даты и времени и представляет его на диаграмме области.Как дата и время используются в области диаграммы?Это мой код.

Highcharts.chart('batch_range_chart', {
  chart: {
    type: 'area'
  },
  title: {
    text: ''
  },
  subtitle: {
    text: ''
  },
  yAxis: {
    title: {
      text: 'Time (hh:mm)'
    },
    type: 'datetime',

  },
  xAxis: {
    title: {
      text: 'Date'
    },
    type: 'datetime',
    dateTimeLabelFormats: {
      //month: '%b \'%y',
    }

  },

  tooltip: {

    //pointFormat: '{series.name} Check In Time <b>{point.y:,.0f}</b><br/>'
  },
  plotOptions: {
    area: {

    }
  },
  series: [{
    name: 'Check In Time',
    data: [
      [1514831400, 10: 00: 00],
      [1514917800, 14: 30: 00],
      [1515004200, 11: 00: 00],
      [1515090600, 09: 00: 00]
    ],
    color: '#6767af'

  }, ]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="batch_range_chart" style="min-width:100%; height: 280px; margin: 0 auto">
  </div>

Его график

enter image description here

1 Ответ

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

Для даты : Вы можете указать дату как Date.UTC(2018, 10, 15)
Для времени Это одно числовое значение, которое можно рассчитать на основе секунд, минут или миллисекунд.для отображения на графике.

yAxis форматер, который вы можете сохранить как:

formatter: function() {
          var time = this.value;
          var hours1 = parseInt(time / 60);
          var mins1 = parseInt(parseInt(time % 60));
          return hours1 + ':' + mins1;
        }

В приведенном выше форматере он рассчитывает часы и минуты на основе общего количества минут.например, 100 минут = 1:40 утра

function minutesToHHMM (mins, twentyFour = false) {
  let h = Math.floor(mins / 60);
  let m = mins % 60;
  m = m < 10 ? '0' + m : m;

  if (twentyFour) {
    h = h < 10 ? '0' + h : h;
    return `${h}:${m}`;
  } else {
    let a = 'am';
    if (h >= 12) a = 'pm';
    if (h > 12) h = h - 12;
    return `${h}:${m} ${a}`;
  }
}



$(function() {
  $('#container').highcharts({
    chart: {
      type: 'column'
    },
    xAxis: {
      type: 'datetime',
      dateTimeLabelFormats: {
        day: '%e of %b'
      }
    },
    yAxis: {
      title: {
        text: 'Time (hh:mm)'
      },
      max: 1440,
      tickInterval: 10,
      labels: {
        formatter: function() {
          var time = this.value;
          return minutesToHHMM(time);
        }
      }
    },
    plotOptions: {
      column: {
        pointPadding: 0.2,
        borderWidth: 0
      },
   },
    series: [{
      data: [
        [Date.UTC(2018, 10, 15), 1440],
        [Date.UTC(2018, 10, 16), 200],
        [Date.UTC(2018, 10, 17), 300],
        [Date.UTC(2018, 10, 18), 0]
      ]

    }]
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
...