处理不同点击的ampiechart切片

时间:2016-03-30 05:58:27

标签: javascript pie-chart amcharts

我有一个不同切片的AmPiechart。我想对每个切片的单击进行不同的操作。

PieChart.addListener("clickSlice", handleClickPie);

function handleClickPie(e) {

        }

我想做类似的事情:

如果ClickSliceNo == 1:Action1

如果ClickSliceNo == 2:Action2

如果ClickSliceNo == 3:Action3

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

1 个答案:

答案 0 :(得分: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>