Как я могу запретить графику amChart автоматически группировать данные? - PullRequest
Новая
       7

Как я могу запретить графику amChart автоматически группировать данные?

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

Я работаю с amChart 4 на Angular 8.0.1. Проблема в том, что он автоматически группирует данные и дает вертикальную линию, представляющую диапазон этого дня, вместо того, чтобы рисовать каждую точку и показывать тренды. Последнее - это то, что я ожидаю.

Что я получаю: enter image description here

Что я ожидал: enter image description here

Я прокомментировал все дополнительные настройки и оставил только необходимые коды: 

ngAfterViewInit() {
  this.ngZone.runOutsideAngular(() => {
    this.chart = am4core.create(this.chartElement.nativeElement, XYChart);
    const dateAxis = this.chart.xAxes.push(new DateAxis());
    const valueAxis = this.chart.yAxes.push(new ValueAxis());
    const series = this.chart.series.push(new LineSeries());
    series.dataFields.dateX = this.dateField; // dateField = 'DATE_TIME'
    series.dataFields.valueY = this.valueField; // valueField = 'ALL'
    
    if (this.pending && this.pending.length) {
      this.chart.data = pending;
      this.pending = [];
    }
  });
}

ngOnInit() {
  this.data$.subscribe(data => {
    if (this.chart) {
      this.chart.data = data;
    } else {
      this.pending = data;
    }
  });
}

В то время как мои данные представляют собой массив с 15K-точками, отформатируйте их следующим образом: 

[
  {
    "DATE_TIME": "2020-03-13T07:04:34.410Z",
    "ALL": 4335
  },
  {
    "DATE_TIME": "2020-03-13T07:05:46.900Z",
    "ALL": 4332
  },
  {
    "DATE_TIME": "2020-03-13T07:06:58.720Z",
    "ALL": 4344
  },
  // ...
  {
    "DATE_TIME": "2020-03-25T17:53:08.720Z",
    "ALL": 5606.59
  },
  {
    "DATE_TIME": "2020-03-25T17:54:20.870Z",
    "ALL": 5575.9400000000005
  }
]

Я предполагаю, что данные слишком велики, поэтому amCharts автоматически группирует данные по дате. Но есть ли возможность отменить эту настройку по умолчанию?

1 Ответ

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

Для графиков на основе даты AmCharts предполагает ежедневные данные (yyyy-MM-dd), которые объясняют, почему ваш график выглядит именно так. Поскольку ваши данные имеют сопровождающую временную метку (ISO8601), вам нужно изменить inputDateFormat, чтобы диаграмма также анализировала компонент времени. AmCharts предоставляет специальный код формата i для автоматического разбора дат ISO: 

chart.dateFormatter.inputDateFormat = 'i';

Здесь вы можете найти другие коды формата

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

dateAxis.baseInterval = {
  timeUnit: "minute",
  count: 1
};
...