带有日期时间的Highchart面积图

Question

在highchart区域图中，我必须在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> 

其图

Answer 1

对于日期 ：您可以将日期作为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 AM

 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>