带有日期时间的Highchart面积图

Question

在海图图表中，我必须在x轴上添加日期，并在y轴上添加时间。对于一个月的学生来说，这是最重要的时间。因此它具有n个日期时间值，并以面积图表示。面积图中如何使用日期和时间？这是我的代码。

@Component
   public classA {
       @Autowired
       private DependencyA dependencyA;
       @Autowired
       private DependencyB dependencyB;
       @Resource(name = ConfigClass.DEPENDENCY_C)
       private String config;
    }

    class ConfigClass {
        public final static String DEPENDENCY_C = "xyz";

        @BEAN(name = DEPENDENCY_C) 
        public String getDependencyC() {
        }

    }

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'

  }, ]
});

它的图

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>