Question

我正在尝试将不规则的时间序列数据绘制到高图表上，例如此示例http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/spline-irregular-time/。

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}
];

我在变量dataArray中有我的数据，并且我试图根据来自的数据建立基于每个品牌的系列数据，但是我遇到的挑战是我需要动态传递'ErrorDate'以及系列中的每个数据点，以便适当地绘制。

实现这一目标的最佳方法是什么？

小提琴：https://jsfiddle.net/ntt5oc21/

Answer 1

您应该在将数据传递给Highcharts之前准备好数据。此文档页面应该有用：https://www.highcharts.com/docs/chart-concepts/series

以下是您处理的数据：

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

  var newPoint = [point.ErrorDate, 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);
  }
});

然后您可以使用 METHODS AND PROPERTIES中的一种方法要动态修改图表 API部分：http://api.highcharts.com/highcharts

例如：

seriesArr.forEach(function(series) {
    chart.addSeries(series);
});

完整演示：https://jsfiddle.net/kkulig/knhx3yvz/

高潮 - 不规则的时间序列

1 个答案: