Question

我有一个工作简单的图表，其中将“得分”与“时间”作图。这里有一个演示：http://jsfiddle.net/akfwsq1e/。

系列数据的格式为[time, score]：

"data": [
    [1540398983, 3], 
    [1540398983, 2], 
    [1540398983, 3], 
    [1540398983, 2], 
    [1540398983, 4], 
    [1540485383, 3]
]

但是，我需要附加更多的元数据，因为将来我想用过滤器等扩展图表。这意味着来自API的数据正在返回命名对象：

"data": [
    { 'dateCompleted': 1540398983, 'score': 3, 'category': 'A' },
    { 'dateCompleted': 1540398983, 'score': 2, 'category': 'C' },
    { 'dateCompleted': 1540398983, 'score': 3, 'category': 'A' },
    { 'dateCompleted': 1540398983, 'score': 2, 'category': 'B' },
    { 'dateCompleted': 1540398983, 'score': 4, 'category': 'A' },
    { 'dateCompleted': 1540485383, 'score': 3, 'category': 'C' }
]

现在我不太在乎过滤，我只需要获取图表以绘制与使用简单对象值时相同的图表即可。当我使用命名值时，尽管图表默默地无法绘制任何内容。

我似乎无法从文档中弄清楚Highcharts如何“知道”要从命名对象绘制的值。

有人可以建议如何使它正常工作吗？

非常感谢。

Answer 1

如果不更改从服务器接收到的对象的结构，则可以实现自己的数据解析功能，该功能将采用具有特定结构的数据，并返回专门为Highcharts准备的数据。

实际上这只是小菜一碟，所以我编写了该函数：

  function mapData(data) {
    let arr;
    arr = data.map(point => {
      return {
        x: point.dateCompleted,
        y: point.score,
        category: point.category
      }
    })
    return arr
  }

实时示例： http://jsfiddle.net/1jp8v6ns/

Answer 2

显然，您需要调用这些值以绘制“ x”和“ y”（https://api.highcharts.com/highcharts/series.column.data）。如此有效：

"data": [
    { 'x': 1540398983, 'y': 3, 'category': 'A' },
    { 'x': 1540398983, 'y': 2, 'category': 'C' },
    { 'x': 1540398983, 'y': 3, 'category': 'A' },
    { 'x': 1540398983, 'y': 2, 'category': 'B' },
    { 'x': 1540398983, 'y': 4, 'category': 'A' },
    { 'x': 1540485383, 'y': 3, 'category': 'C' }
]

当系列数据使用命名对象时，将数据绘制到图表上

2 个答案: