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 is set to match your date format as documented here 默认格式为 yyyy-MM-dd，截断其他所有内容以使其看起来像每日数据，类似于您的屏幕截图：

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

由于您的数据以秒为单位，因此还建议相应地设置 baseInterval 以确保正确呈现您的数据。

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

AmCharts：超大数据集的数据分组

AmCharts: Data grouping for very large data sets

amcharts

amcharts4