如何使用amCharts绘制图表的显示区域中的点数

如何解决如何使用amCharts绘制图表的显示区域中的点数

我使用amCharts制作了折线图（XYChart），我想知道是否有办法获取要放大的区域中的点数（项目符号）。我需要在框中显示该数字每次缩放其他区域时。 谢谢你的帮助 洛朗（Laurent）

解决方法

要做到这一点，我相信这是您必须要做的：

1. 为图表光标创建一个zoomended事件监听器（当您使用光标完成缩放时触发）。
2. 将起点和终点值（坐标）指向您的轴，并检索相对于轴的实际起点和终点值。这部分取决于您的轴数据类型，positionToDate代表日期轴，positionToCategory代表类别轴。
3. 具有另一个功能来计算两个值之间的数据项数量（基于图表数据）。

我已经从官方演示中创建了一个片段，并附带了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);
  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>