时间戳

首页 > 解决方案 > 当系列数据使用命名对象时，将数据绘制到 highchart 图表上

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

问题描述

我有一个工作的、简单的高图表，它绘制了“分数”与“时间”的关系。这里有一个演示：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 如何“知道”从命名对象中绘制哪些值。

谁能建议如何使它工作？

非常感谢。

标签： highcharts

解决方案

如果你不改变从服务器接收到的对象的结构，你可以实现自己的数据解析函数，它获取特定结构的数据，并返回专门为 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/

推荐阅读