单击 XY am4chart 时如何指示特定数据点?
How to indicate the specific datapoint on the XY am4chart upon clicking on it?
这看起来可能真的微不足道,但我无法在任何地方找到解决我的问题的方法。所以我有一个经典的 XY am4chart,在线系列中有几百个数据点。我希望图表在单击图表中的给定点时绘制一条垂直线(或以任何其他方式指示)。因此,如果我单击一次,则指示会出现在该点,如果我单击图表上的其他位置 - 指示将移动到新位置。提前致谢!
您可以在点击一个点时触发光标。这是一个例子:
// 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,在线系列中有几百个数据点。我希望图表在单击图表中的给定点时绘制一条垂直线(或以任何其他方式指示)。因此,如果我单击一次,则指示会出现在该点,如果我单击图表上的其他位置 - 指示将移动到新位置。提前致谢!
您可以在点击一个点时触发光标。这是一个例子:
// 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);
});