Блог

Главная - Вопросы по программированию - Как получить количество точек в отображаемой области диаграммы, созданной с помощью amCharts

Как получить количество точек в отображаемой области диаграммы, созданной с помощью amCharts

#javascript #charts #amcharts

#javascript #Диаграммы #amcharts

Вопрос:

Я создал линейную диаграмму (XYChart), используя amCharts, и мне было интересно, есть ли способ получить количество точек (маркеров) в области, которую я увеличиваю. Мне нужно показывать это число в поле каждый раз, когда я увеличиваю масштаб другой области. Спасибо за вашу помощь, Лоран

Ответ №1:

Для того, чтобы сделать это, я считаю, что это то, что вам нужно сделать:

  1. Создайте zoomended прослушиватель событий для вашего курсора диаграммы (это срабатывает, когда вы завершаете масштабирование курсором).
  2. Укажите начальное и конечное значения (координаты) на вашей оси и извлеките фактические начальные и конечные значения относительно оси. Эта часть зависит от типа данных вашей оси, positionToDate для оси даты и positionToCategory для оси категорий.
  3. Есть другая функция для вычисления количества элементов данных между 2 значениями (на основе данных вашей диаграммы).

Я создал фрагмент из официальной демо-версии с zoomended примером обработчика событий, прикрепленным к нему.

 /**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

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

var data = [];
var value = 50;
for(var i = 0; i < 300; i  ){
  var date = new Date();
  date.setHours(0,0,0,0);
  date.setDate(i);
  value -= Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
  data.push({date:date, value: value});
}

chart.data = data;

// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 60;

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

// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.tooltipText = "{value}"

series.tooltip.pointerOrientation = "vertical";

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

//Zoomended cursor events here
chart.cursor.events.on("zoomended", function(ev) {
  const range = ev.target.xRange;
  const axis = ev.target.chart.xAxes.getIndex(0);
  const from = axis.positionToDate(axis.toAxisPosition(range.start));
  const to = axis.positionToDate(axis.toAxisPosition(range.end));

  console.log(from);
  console.log(to);
});  
 body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 200px;
}  
 <script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

Комментарии:

1. Эта функция (пункт 3) — это то, чего мне сейчас не хватает. Спасибо за вашу помощь. Кстати, мне нравится этот способ масштабирования.