highcharts 日期时间类型在引导程序 4 列中不起作用答案

【问题标题】：highcharts datetime type doesnt work in bootstrap 4 columnhighcharts 日期时间类型在引导程序 4 列中不起作用
【发布时间】：2020-06-23 21:44:32
【问题描述】：

我使用 highcharts 在 bootstrap 4 列中显示日期时间类型图表，如下所示：

HTML：

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <div id="container" style="height: 400px"></div>
      </div>
      <div class="col-md-4">
        Right Column
      </div>
    </div>
  </div>
</section>

JS：

Highcharts.chart('container', {
  chart: {
    type: 'area'
  },
  xAxis: {
    type: 'datetime',
  },

  plotOptions: {
    series: {
      fillOpacity: 0.1
    }
  },

  series: [{
    data: [{
      "x": 1592501154000,
      "y": 14520000
    }, {
      "x": 1592587554000,
      "y": 14000000
    }, {
      "x": 1592673954000,
      "y": 14800000
    }, {
      "x": 1592760354000,
      "y": 10000000
    }, {
      "x": 1592846754000,
      "y": 14000000
    }, {
      "x": 1592933154000,
      "y": 14000000
    }, {
      "x": 1593019554000,
      "y": 14000000
    }]
  }],

});

但在行动中，highcharts 不显示真实（即：7 天数据）结果列。

我该如何解决这个问题？

演示Here

【问题讨论】：

标签： html jquery twitter-bootstrap highcharts bootstrap-4

【解决方案1】：

实际上...带有渲染图表的一切都很好。请注意，刻度间隔为 2 天，因此它们非常适合每个点。默认情况下，Highcharts 不会在 xAxis 上为每个点呈现刻度线，而是计算恒定的时间戳 - 否则会影响图表的可读性，例如对于具有数千个点的图表。

您可以在 API 中找到：

在日期时间轴中，数字以毫秒为单位，刻度线放置在适当的值上，例如完整的小时或天。

API：https://api.highcharts.com/highcharts/xAxis.type

API：https://www.highcharts.com/docs/chart-concepts/axes#ticks

【讨论】：