AMCHARTS 4组数据

Question

当我在AMCHARTS 4上对数据进行分组时，我很难得到我想要的结果。

我按照这里的例子进行了操作。https:/www.amcharts.comdemosdata-grouping-50k-points

这就导致了以下的结果。图表

两张图使用的是同一个数据集。

如你所提供的图片所示，下图是AMCHARTS 3未分组，上图是AMCHARTS 4并设置为分组。

我想看到的是；上图的峰值来显示分组数据的最高结果。所以两张图上4月06日到4月08日之间的部分会显示结果150，就像下面的AMCHARTS 3图一样。

这是我的代码，供参考。

chart = am4core.create($scope.id, am4charts.XYChart);
chart.data = readingData;

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0.5;
dateAxis.renderer.labels.template.location = 0.5;
dateAxis.renderer.minGridDistance = 60;
dateAxis.groupData = true;
dateAxis.minZoomCount = 3;

dateAxis.groupIntervals.setAll([
  { timeUnit: "second", count: 10 },
  { timeUnit: "minute", count: 1 },
  { timeUnit: "hour", count: 1 },
  { timeUnit: "day", count: 1 },
  { timeUnit: "week", count: 1 },
  { timeUnit: "month", count: 1 },
  { timeUnit: "year", count: 1 },
]);

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

var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "created_at";
series.dataFields.valueY = "total";
series.tooltipText = "{valueY}";
series.tooltip.pointerOrientation = "vertical";
series.tooltip.background.fillOpacity = 0.5;

series.groupFields.valueY = "max";

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

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

任何帮助都是非常感激的

Answer 1

没有 "最大 "的设置 groupFields. 有效值是 "open"，"close"，"low"，"high"，"average "和 "sum"。

在您的情况下，可以尝试使用 "打开"、"关闭"、"低"、"高"、"平均 "和 "总和"。"high"，例如

series.groupFields.valueY = "high";

下面的演示。

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = generateData();

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0.5;
dateAxis.renderer.labels.template.location = 0.5;
dateAxis.renderer.minGridDistance = 60;
dateAxis.groupData = true;
dateAxis.minZoomCount = 3;

dateAxis.groupIntervals.setAll([{
    timeUnit: "second",
    count: 10
  },
  {
    timeUnit: "minute",
    count: 1
  },
  {
    timeUnit: "hour",
    count: 1
  },
  {
    timeUnit: "day",
    count: 1
  },
  {
    timeUnit: "week",
    count: 1
  },
  {
    timeUnit: "month",
    count: 1
  },
  {
    timeUnit: "year",
    count: 1
  },
]);

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

var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "created_at";
series.dataFields.valueY = "total";
series.tooltipText = "{valueY}";
series.tooltip.pointerOrientation = "vertical";
series.tooltip.background.fillOpacity = 0.5;

series.groupFields.valueY = "high";

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

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

function generateData() {
  var date = new Date(2019, 4, 1);
  var data = [];
  for (var i = 0; i < 2500; ++i) {
    var newDate = new Date(date);
    newDate.setSeconds(newDate.getSeconds() + i);
    data.push({
      total: 100 * Math.sin((Math.PI / 180) * i) + 100,
      created_at: newDate
    })
  }
  return data;
}

#chartdiv {
  width: 100%;
  height: 400px;
}

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>