Группировка Amcharts / создание серии по собственности - PullRequest
Новая
       11

Группировка Amcharts / создание серии по собственности

0 голосов
/ 27 марта 2020

Я использую Amchart v4 и у меня есть следующие данные.

[

  {
    "date": 1583419378000,
    "id": "A",
    "value": "76"
  },
  {
    "date": 1583419378000,
    "id": "B",
    "value": "72"
  },
  {
    "date": 1583419378000,
    "id": "C",
    "value": "908"
  },
  {
    "date": 1583419379000,
    "id": "A",
    "value": "44"
  },
  {
    "date": 1583419379000,
    "id": "B",
    "value": "704"
  },
  {
    "date": 1583419379000,
    "id": "C",
    "value": "918"
  },
]

* Ось X - это дата (отметка времени), а ось Y - это значение. Я хочу создать 3 линии на графике, используя идентификатор.

Есть ли способ сгруппировать по идентификатору, чтобы получить 3 линии? У меня только одна «серия» на данный момент, и она производит одну строку со всеми данными? 

let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 60;

 chart.yAxes.push(new am4charts.ValueAxis());

// Create series
let series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.name = "id";
series.dataFields.dateX = "date";
series.dataFields.category = "id";
series.tooltipText = "{value}"
series.tooltip.pointerOrientation = "vertical";



chart.cursor = new am4charts.XYCursor();
chart.cursor.snapToSeries = series;
chart.cursor.xAxis = dateAxis;

Я пробовал series.dataFields.category = "id";

1 Ответ

0 голосов
/ 28 марта 2020

Вам нужно создать отдельные серии для каждой строки, которую вы хотите отобразить. Для диаграммы нет способа автоматически создавать сгруппированные серии для вас.

Что касается обработки данных, у вас есть два варианта:

1) Вручную сгруппируйте данные по дате, но выполните отдельные поля значений для каждого идентификатора: 

chart.data =[
  {
    "date": 1583419378000,
    "valueA": "76",
    "valueB": "72",
    "valueC": "908"
  },
  // ... etc
];

//create each series and point to each individual value:

seriesA = chart.series.push(new am4charts.LineSeries());
seriesA.dataFields.valueY = "valueA";
series.dataFields.dateX = "date";
seriesA.name = "A"; // Note you have to specify the name directly. You can't map by a property.
// ... repeat

2) Вручную создайте отдельные массивы данных на основе идентификатора и присвойте массивы непосредственно серии, а не диаграмме: 

// assumes your data is in a variable called "data"
seriesA = chart.series.push(new am4charts.LineSeries());
seriesA.dataFields.valueY = "value";
seriesA.dataFields.dateX = "date";
seriesA.name = "A"; 
seriesA.data = data.filter(item => item.id == 'A');
// repeat for each id
...