我有一个堆积的条形图,并在其上分配了一个单击侦听器,以了解单击了哪个项目。
series.columns.template.events.on("hit", function(ev) {
console.log(ev.target);
}, this);
但是在相应的target.dataItem json中,我找不到单击类别的任何字段。仅年份和数值可用。如何获得实际的图例类别?Codepen implementation
您可以通过target.dataItem.component
访问系列信息。这将包含用于填充图例的系列信息,例如名称。
series.columns.template.events.on("hit", function(ev) {
console.log(ev.target.dataItem.component.name);
}, this);
下面的演示:
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = [{
"year": "2016",
"europe": 2.5,
"namerica": 2.5,
"asia": 2.1,
"lamerica": 0.3,
"meast": 0.2,
"africa": 0.1
}, {
"year": "2017",
"europe": 2.6,
"namerica": 2.7,
"asia": 2.2,
"lamerica": 0.3,
"meast": 0.3,
"africa": 0.1
}, {
"year": "2018",
"europe": 2.8,
"namerica": 2.9,
"asia": 2.4,
"lamerica": 0.3,
"meast": 0.3,
"africa": 0.1
}];
chart.legend = new am4charts.Legend();
chart.legend.position = "right";
// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.renderer.grid.template.opacity = 0;
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.renderer.grid.template.opacity = 0;
valueAxis.renderer.ticks.template.strokeOpacity = 0.5;
valueAxis.renderer.ticks.template.stroke = am4core.color("#495C43");
valueAxis.renderer.ticks.template.length = 10;
valueAxis.renderer.line.strokeOpacity = 0.5;
valueAxis.renderer.baseGrid.disabled = true;
valueAxis.renderer.minGridDistance = 40;
// Create series
function createSeries(field, name) {
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = field;
series.dataFields.categoryY = "year";
series.stacked = true;
series.name = name;
var labelBullet = series.bullets.push(new am4charts.LabelBullet());
labelBullet.locationX = 0.5;
labelBullet.label.text = "{valueX}";
labelBullet.label.fill = am4core.color("#fff");
series.columns.template.events.on("hit", function(ev) {
console.log(ev.target.dataItem.component.name);
}, this);
}
createSeries("europe", "Europe");
createSeries("namerica", "North America");
createSeries("asia", "Asia");
createSeries("lamerica", "Latin America");
createSeries("meast", "Middle East");
createSeries("africa", "Africa");
#chartdiv {
width: 100%;
height: 500px;
}
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>