简体   繁体   English

如何在 Amcharts 4 饼图中获取点击切片的值

[英]How to get the value of clicked slice in Amcharts 4 pie chart

I am trying to get the value of clicked slice in Amcharts 4 3d pie chart.我试图在 Amcharts 4 3d 饼图中获取单击切片的值。 I am using this below code:我正在使用以下代码:

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}

</style>

<!-- Resources -->
<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>

<!-- Chart code -->
<script>
am4core.ready(function() {

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

var chart = am4core.create("chartdiv", am4charts.PieChart3D);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

chart.legend = new am4charts.Legend();

chart.data = [
  {
    country: "Lithuania",
    litres: 501.9
  },
  {
    country: "Czech Republic",
    litres: 301.9
  },
  {
    country: "Ireland",
    litres: 201.1
  },
  {
    country: "Germany",
    litres: 165.8
  },
  {
    country: "Australia",
    litres: 139.9
  },
  {
    country: "Austria",
    litres: 128.3
  },
  {
    country: "UK",
    litres: 99
  },
  {
    country: "Belgium",
    litres: 60
  },
  {
    country: "The Netherlands",
    litres: 50
  }
];

var pieSeries = chart.series.push(new am4charts.PieSeries3D());
pieSeries.dataFields.value = "litres";
pieSeries.dataFields.category = "country";

// AMCHART OFFICIAL DOCUMENTATION: https://www.amcharts.com/docs/v4/tutorials/one-pulled-slice-per-pie-chart/#Solution
pieSeries.slices.template.events.on("hit", function(ev) {
  var series = ev.target.dataItem.component;
  console.log(series);
});

}); // end am4core.ready()
</script>

<!-- HTML -->
<div id="chartdiv"></div>
amCharts

Now, as per Amcharts official documentation I added the hit event.现在,根据 Amcharts 官方文档,我添加了hit事件。 Neither I know how to get the value of the clicked slice nor I found any documentation/post regarding it.我既不知道如何获取单击切片的值,也没有找到任何有关它的文档/帖子。

Now, there are a couple of stackoverflow posts about the same but for Amcharts version 3 library and I am particularly looking for Amchart's version 4 library.现在,有一些关于相同的 stackoverflow 帖子,但对于 Amcharts 版本 3 库,我特别在寻找 Amchart 版本 4 库。

Kindly guide me here on how to get the value of clicked slice in Amcharts version 4 library.请在此处指导我如何获取 Amcharts 版本 4 库中单击切片的值。

Update : I am looking forward to get the property of country of chart.data .更新:我期待获得chart.data country的属性。

It actually shows in the link you provided.它实际上显示在您提供的链接中。 It is merely a bit burried.它只是有点隐蔽。 To get the assigned value property of the clicked slice, you can access the dataItem.value of the current element ev.target :要获取单击切片的value属性,您可以访问当前元素ev.targetdataItem.value

//AMCHART OFFICIAL DOCUMENTATION: https://www.amcharts.com/docs/v4/tutorials/one-pulled-slice-per-pie-chart/#Solution
pieSeries.slices.template.events.on("hit", function(ev){
  console.log(ev.target.dataItem.value)
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM