如何防止 amChart 折线图自动分组数据？

Question

我正在 Angular 8.0.1 上使用 amChart 4。问题在于它会自动对数据进行分组并给出代表当天范围的垂直线，而不是绘制每个点并显示趋势。后者才是我所期待的。

我得到的：

我的预期：

我已经评论了所有附加设置，只保留基本代码：

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 自动按日期分组数据。但是有没有办法取消这个默认设置呢？

Answer 1

对于基于日期的图表，AmCharts 假定每日数据 (yyyy-MM-dd)，这解释了为什么您的图表看起来是那样的。由于您的数据带有时间戳 (ISO8601)，因此您需要修改 inputDateFormat 以告知图表也解析出时间组件。 AmCharts 提供了一种特殊的 i 格式代码来自动解析 ISO 日期：

chart.dateFormatter.inputDateFormat = 'i';

您可以找到更多格式代码here

您还需要在日期轴上指定 baseInterval 以匹配日期数据的粒度，以便图表可以正确绘制系列和轴。

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

如何防止 amChart 折线图自动分组数据？

How can I prevent amChart line chart from auto grouping data?

amcharts

typescript

angular8