单击 XY am4chart 时如何指示特定数据点？

Question

这看起来可能真的微不足道，但我无法在任何地方找到解决我的问题的方法。所以我有一个经典的 XY am4chart，在线系列中有几百个数据点。我希望图表在单击图表中的给定点时绘制一条垂直线（或以任何其他方式指示）。因此，如果我单击一次，则指示会出现在该点，如果我单击图表上的其他位置 - 指示将移动到新位置。提前致谢！

Answer 1

您可以在点击一个点时触发光标。这是一个例子：

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

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

// Add data
chart.data = [{
  "date": new Date(2018, 3, 20),
  "value": 90
}, {
  "date": new Date(2018, 3, 21),
  "value": 102
}, {
  "date": new Date(2018, 3, 22),
  "value": 65
}, {
  "date": new Date(2018, 3, 23),
  "value": 62
}, {
  "date": new Date(2018, 3, 24),
  "value": 55
}, {
  "date": new Date(2018, 3, 25),
  "value": 81
}];

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

// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.yAxis = valueAxis;
chart.cursor.lineX.disabled = true;
chart.cursor.interactionsEnabled = false;
chart.cursor.events.on("track", event => {
  chart.cursor.hide();
  chart.cursor.interactionsEnabled = false;
});

// Create series
var lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.valueY = "value";
lineSeries.dataFields.dateX = "date";
lineSeries.name = "Sales";
lineSeries.strokeWidth = 3;

// Add simple bullet
var bullet = lineSeries.bullets.push(new am4charts.Bullet());
var image = bullet.createChild(am4core.Image);
image.href = "https://www.amcharts.com/lib/images/star.svg";
image.width = 30;
image.height = 30;
image.horizontalCenter = "middle";
image.verticalCenter = "middle";
// attach click event
bullet.events.on("hit", event => {
  chart.cursor.interactionsEnabled = true;
  var point = event.target.dataItem.point;
  chart.cursor.triggerMove(point);
});

单击 XY am4chart 时如何指示特定数据点？

How to indicate the specific datapoint on the XY am4chart upon clicking on it?

angular

line

amcharts

amcharts4

timeserieschart