javascript - AMCHARTS 4 组数据

Question

在 AMCHARTS 4 上对数据进行分组时，我正在努力获得我正在寻找的结果。

我已经按照这里看到的例子：https ://www.amcharts.com/demos/data-grouping-50k-points/

这会产生以下结果： 图表

两张图使用相同的数据集。

正如您所提供的图片所见，下方是 AMCHARTS 3 未分组，顶部是 AMCHARTS 4 并设置为分组。

我想看到的是；顶部图表的峰值以显示分组数据的最高结果。因此，两张图上 4 月 6 日和 4 月 8 日之间的部分将显示结果 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;

任何帮助是极大的赞赏。

标签： javascriptchartsamchartsamcharts4

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>