AMCHARTS 4 Групповые данные - PullRequest
Новая
       27

AMCHARTS 4 Групповые данные

0 голосов
/ 23 апреля 2020

Я изо всех сил пытаюсь получить нужный мне результат при группировке данных в AMCHARTS 4.

Я следовал приведенному здесь примеру: https://www.amcharts.com/demos/data-grouping-50k-points/

Это приводит к следующему: Графики

Оба графика используют один и тот же набор данных.

Как видно из представленного изображения, нижний - AMCHARTS 3 Not сгруппированы и верхний AMCHARTS 4 и настроен для группировки.

Я хотел бы видеть это; пики верхнего графика, чтобы показать самый высокий результат сгруппированных данных. Таким образом, раздел между 06 и 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;

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 23 апреля 2020

В groupFields нет настройки «max». Допустимые значения: «открыть», «закрыть», «низкий», «высокий», «средний» и «сумма».

В вашем случае попробуйте использовать "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>
...