AmCharts: группировка данных для очень больших наборов данных

Question

Я использую линейную диаграмму amcharts.

У меня есть данные за последние 24 часа, и они записываются каждые секунды.

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

Вот мой код:

  var multiLineChart = am4core.create(
        "multilineChartdiv",
        am4charts.XYChart
      );
      multiLineChart.paddingRight = 20;

      multiLineChart.data = historicalData;

      var dateAxis1 = multiLineChart.xAxes.push(new am4charts.DateAxis());
      dateAxis1.renderer.grid.template.location = 0;
      dateAxis1.minZoomCount = 1;
      dateAxis1.renderer.minGridDistance = 60;
      // dateAxis1.baseInterval = {
      //   timeUnit: "minute",
      //   count: 5,
      // };

      // this makes the data to be grouped
     dateAxis1.groupData = true;
      dateAxis1.groupCount = 500;

      var valueAxis = multiLineChart.yAxes.push(new am4charts.ValueAxis());

      var series1 = multiLineChart.series.push(new am4charts.LineSeries());
      series1.dataFields.dateX = "date";
      series1.dataFields.valueY = "heartRate";
      series1.tooltipText = "{valueY}";
      series1.tooltip.pointerOrientation = "vertical";
      series1.tooltip.background.fillOpacity = 0.5;

      multiLineChart.cursor = new am4charts.XYCursor();
      multiLineChart.cursor.xAxis = dateAxis1;

      var scrollbarX = new am4core.Scrollbar();
      scrollbarX.marginBottom = 20;
      multiLineChart.scrollbarX = scrollbarX; 

Мне нужно отображать точки данных как минимум каждые 5 или 10 минут.

Answer 1

Если ваша временная метка является строкой, убедитесь, что inputDateFormat установлен в соответствии с вашим форматом даты как , задокументированным здесь , поскольку формат по умолчанию - yyyy-MM-dd, усекая все остальное чтобы выглядеть как ежедневные данные, как на вашем скриншоте:

chart.dateFormatter.inputDateFormat = 'yyyy-MM-dd HH:mm:ss' //adjust as needed

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

      dateAxis1.baseInterval = {
         timeUnit: "second",
         count: 1,
      };