如何在 Highchart 中显示所有数据答案

【问题标题】：How to show all data in Highchart如何在 Highchart 中显示所有数据
【发布时间】：2018-02-03 17:12:08
【问题描述】：

如何确保数据彼此接近并按日期时间排序。我想用日期时间显示所有数据

var charts = Highcharts.chart('container', {
  xAxis: {
    type: 'datetime'
  },
  series: [{
    type: 'area',
    data: [
      [Date.UTC(2015, 9, 25, 14, 13, 00), 3.500],
      [Date.UTC(2015, 9, 25, 14, 13, 02), 3.501],
      [Date.UTC(2015, 9, 25, 14, 13, 04), 3.502],
      [Date.UTC(2015, 9, 25, 14, 13, 06), 3.505],
      [Date.UTC(2015, 9, 25, 14, 13, 08), 3.509],
      [Date.UTC(2015, 9, 25, 14, 13, 10), 3.507],
      [Date.UTC(2015, 9, 25, 14, 13, 12), 3.510],
      [Date.UTC(2015, 9, 25, 14, 13, 14), 3.525],
      [Date.UTC(2015, 9, 25, 14, 13, 16), 3.536],
      [Date.UTC(2015, 9, 25, 14, 13, 18), 3.575],
      [Date.UTC(2015, 9, 25, 14, 13, 20), 3.595],
      [Date.UTC(2015, 9, 25, 14, 13, 22), 3.514],
      [Date.UTC(2015, 9, 25, 14, 13, 24), 3.525],
      [Date.UTC(2015, 9, 25, 14, 13, 26), 3.536],
      [Date.UTC(2015, 9, 25, 14, 13, 28), 3.514],
      [Date.UTC(2015, 9, 25, 14, 13, 30), 3.510],
      [Date.UTC(2015, 9, 25, 14, 13, 32), 3.523],
      [Date.UTC(2015, 9, 25, 14, 13, 34), 3.596],
      [Date.UTC(2015, 9, 26, 18, 13, 34), 4.596]
    ]
  }]
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

【问题讨论】：

问题是您在几秒钟内获得了很多积分，然后一整天都没有积分。 'datetime' 绘图可能不是此类应用程序的最佳选择。

标签： javascript datetime charts highcharts

【解决方案1】：

除了@Z. Bagley 写道，要解决这个问题，您可以使用几个解决方案。第一个是关于使用 Highstock 图表。在 Highstock 图表中有一个名为 ordinal 的属性（默认为 true），它在 xAxis 上平均分配点。其次，您可以使用 breaks 并设置新的 xAxis 极值以减少最后两个日期之间的距离。您也可以尝试添加scrollbar。

API 参考：
http://api.highcharts.com/highstock/xAxis.ordinal
http://api.highcharts.com/highcharts/xAxis.breaks
http://api.highcharts.com/highstock/scrollbar

示例：
http://jsfiddle.net/pbdor59x/ - 使用 Highstock 和序数属性 http://jsfiddle.net/abwpqs19/ - 使用休息 http://jsfiddle.net/4cc2n3sp/ - 使用滚动条

【讨论】：