Question

晚上好（CET），

我收集数据，计算一天的总和，将值存储在mySQL中，时间戳接近当天24小时（如8月4日23:59:30）。

在Highchart Column图表中，该值将显示在8月5日。（你会看到它悬停在条形图上，该值不适合xAxis。）

// data
var data = [ [1501624793000, 3389], [1501883993000, 4045], [1501970397000, 6572], [1502056798000, 5836], [1502143193000, 4736], [1502229588000, 6629],  [1502315996000, 3981], [1502402391000, 4424] ]

// create the chart
Highcharts.stockChart('container', {
  series: [{
    type: 'column',
    data: data,
  }]
});

期待任何建议，让酒吧在它所属的那一天居中。

Answer 1

假设您的所有数据都采用相同的格式（即接近午夜），您可以使用pointplacement轻松完成此操作：fiddle。根据您的时区，您可能需要稍微调整一下这个值。

Highcharts.stockChart('container', {
    series: [{
        type: 'column',
        data: data,
        pointPlacement: -1.2
        }]
});

另一种选择是移动刻度线API。

Answer 2

您可以将x数据更改为关闭整天，然后在图表中一切正常，轴，点，工具提示会将x值显示为全天。

如果您需要在工具提示中有精确的一天，那么您可以将其显示为信息。演示：http://jsfiddle.net/BlackLabel/7uhdfcj4/

＆＃13;

// data
var data = [
  [1501624793000, 3389],
  [1501883993000, 4045],
  [1501970397000, 6572],
  [1502056798000, 5836],
  [1502143193000, 4736],
  [1502229588000, 6629],
  [1502315996000, 3981],
  [1502402391000, 4424],
];

Highcharts.each(data, function(d, i) {
  var realTime = d[0],
    date = Highcharts.dateFormat('%Y:%m:%d:%H:%M:%S:%L', realTime).split(':'),
    day = (+date[2]) + ((+date[3]) > 19 ? 1 : 0);

  data[i].push(realTime);
  data[i][0] = Date.UTC(+date[0], +date[1], day);
});

// create the chart
Highcharts.stockChart('container', {
  series: [{
    type: 'column',
    data: data,
    keys: ['x', 'y', 'realTime'],
    tooltip: {
      pointFormat: '{point.realTime: %Y.%m.%d %H:%M:%S}'
    }
  }]
});

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>


<div id="container" style="height: 400px"></div>

＆＃13;

Highcharts - 数据日提前一天

2 个答案: