javascript - 处理 ampiechart 切片的不同点击

Question

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

PieChart.addListener("clickSlice", handleClickPie);

function handleClickPie(e) {

        }

我想做这样的事情:

如果 ClickSliceNo == 1 : Action1

如果 ClickSliceNo == 2 : Action2

如果 ClickSliceNo == 3 : Action3

我如何在 handleClickPie() 函数中处理它？<​​/p>

Answer 1

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

这是一个例子:

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

---

JS

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>