Amcharts 4饼图中如何获取点击切片的值
How to get the value of clicked slice in Amcharts 4 pie chart
我正在尝试获取 Amcharts 4 3d 饼图中单击切片的值。我正在使用下面的代码:
<!-- 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
现在,根据 Amcharts 官方文档,我添加了 hit
事件。我既不知道如何获取单击的切片的值,也没有找到任何关于它的 documentation/post。
现在,Whosebug 上有几篇关于 Amcharts 版本 3 库的帖子,我特别在寻找 Amchart 版本 4 库。
请指导我如何在 Amcharts 版本 4 库中获取单击切片的值。
更新:我期待得到chart.data
的country
的属性。
它实际上显示在您提供的 link 中。它只是有点埋葬。获取点击切片的赋值value
属性,可以访问当前元素的dataItem.value
ev.target
:
//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)
});
我正在尝试获取 Amcharts 4 3d 饼图中单击切片的值。我正在使用下面的代码:
<!-- 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
现在,根据 Amcharts 官方文档,我添加了 hit
事件。我既不知道如何获取单击的切片的值,也没有找到任何关于它的 documentation/post。
现在,Whosebug 上有几篇关于 Amcharts 版本 3 库的帖子,我特别在寻找 Amchart 版本 4 库。
请指导我如何在 Amcharts 版本 4 库中获取单击切片的值。
更新:我期待得到chart.data
的country
的属性。
它实际上显示在您提供的 link 中。它只是有点埋葬。获取点击切片的赋值value
属性,可以访问当前元素的dataItem.value
ev.target
:
//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)
});