Question

我有一个显示时间序列数据的高图，我遇到的问题是每个系列都是从1月1日开始，除非我定义了一个pointStart。正如此处HighCharts API所述，我的理解是，如果没有为系列中的点指定x值，则可以指定pointStart。

然而，我想要完成的是将每个系列绘制在动态给出的第一个x值，而不用硬编码日期。

例如，这是我的数据，

  var dataArray = [{
  ErrorDate: "2017-09-07",
  Brand: "Toyota",
  Count: 3
 }, {
  ErrorDate: "2017-09-02",
  Brand: "Ford",
  Count: 258
 }, {
  ErrorDate: "2017-09-03",
  Brand: "Ford",
  Count: 239
 }, {
  ErrorDate: "2017-09-04",
  Brand: "Ford",
  Count: 197
 }, {
  ErrorDate: "2017-09-05",
  Brand: "Ford",
  Count: 187
 }, {
  ErrorDate: "2017-09-06",
  Brand: "Ford",
  Count: 418
 }, {
  ErrorDate: "2017-09-07",
  Brand: "Ford",
  Count: 344
 }, {
  ErrorDate: "2017-09-03",
  Brand: "Mercedes",
  Count: 43
}, {
  ErrorDate: "2017-09-04",
  Brand: "Mercedes",
  Count: 220
}, {
  ErrorDate: "2017-09-03",
  Brand: "Chrysler",
  Count: 3
}, {
  ErrorDate: "2017-09-04",
  Brand: "Chrysler",
  Count: 3
}, {
 ErrorDate: "2017-09-06",
 Brand: "Chrysler",
 Count: 6
}, {
 ErrorDate: "2017-09-07",
 Brand: "Chrysler",
 Count: 1
}];

我希望每个品牌都可以在它的第一个x值等处绘制。而不是在硬编码的pointStart上绘制。

这是我的jsfiddle： JsFiddle

Answer 1

使用point.ErrorDate更新new Date(point.ErrorDate).getTime()，根据highcharts的要求将日期转换为微秒

var seriesArr = [];
dataArray.forEach(function(point) {

  var newPoint = [new Date(point.ErrorDate).getTime(), point.Count],
    seriesIndex = seriesArr.findIndex((series) => series.name === point.Brand);

  if (seriesIndex === -1) {
    seriesArr.push({
      name: point.Brand,
      data: [newPoint]
    });
  } else {
    seriesArr[seriesIndex].data.push(newPoint);
  }
});

Fiddle演示

highchart - 具有给定x值的pointstart

1 个答案: