Gestire diversi clic delle sezioni dello schema grafico

Question

Possiedo un AmPiechart con sezioni diverse. Voglio eseguire diverse azioni su singoli clic di ogni sezione.

PieChart.addListener("clickSlice", handleClickPie); 

function handleClickPie(e) { 

     } 

voglio fare qualcosa di simile:

Se ClickSliceNo == 1: Action1

Se ClickSliceNo == 2: Azione2

Se ClickSliceNo == 3: Action3

Come gestirlo nella funzione handleClickPie()?

Answer 1

Sì, come indicato nel commento, è possibile accedere alle proprietà dell'elemento sezione e quindi gestire tali proprietà come si ritiene opportuno.

Ecco un esempio:

• 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>