处理ampiechart切片的不同点击答案

【问题标题】：Handle different clicks of ampiechart slices处理ampiechart切片的不同点击
【发布时间】：2016-03-30 05:58:26
【问题描述】：

我有一个包含不同切片的 AmPiechart。我想对每个切片的单独点击执行不同的操作。

PieChart.addListener("clickSlice", handleClickPie);

function handleClickPie(e) {

        }

我想做这样的事情：

如果 ClickSliceNo == 1 : Action1

如果 ClickSliceNo == 2 : Action2

如果 ClickSliceNo == 3 : Action3

如何在 handleClickPie() 函数中处理它？

【问题讨论】：

找到它：e.dataItem.value == "SliceName"

标签： javascript pie-chart amcharts

【解决方案1】：

是的，正如您在评论中指出的那样，您可以访问切片项目的属性，然后按照您认为合适的方式处理这些属性。

这是一个例子：

https://jsfiddle.net/7osqoycj/1/

var chart = AmCharts.makeChart("chartdiv", {
    "type": "pie",
    "theme": "light",
    "dataProvider": [{
        "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
    }],
    "valueField": "litres",
    "titleField": "country",
    "balloon": {
        "fixedPosition": true
    },
    "listeners": [{
        "event": "clickSlice",
        "method": myCustomClick
    }]
});

function myCustomClick(e) {
    // to see the full api, log out "e"
    // console.log(e);
    var country = e.dataItem.dataContext.country;
    if (country === "Lithunia") {
        alert("Lithuania: the home of amCharts.");
    } else if (country === "Germany") {
        alert("Munich is a city in Germany.");
    } else if (country === "Austria") {
        alert("Skiing in Austria is awesome.");
    } else {
        alert("You have clicked " + country + ".");
    }
}

CSS

#chartdiv {
    width: 100%;
    height: 500px;
    font-size: 11px;
}

HTML

<div id="chartdiv"></div>

【讨论】：