Построение данных на диаграмме старшей диаграммы, когда данные ряда используют именованные объекты

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