问题
How can we make the pie charts slice as a hyperlink or how to show at least hand cursor on slices.
check the code below. which i am using creating a pie chart using amcharts.
var initChart = function() {
if (chart) chart.destroy();
var config = scope.config || {};
chart = AmCharts.makeChart(scope.chartid, {
"type": "pie",
"theme": "light",
"marginTop": 10,
"marginBottom":10,
"allLabels": [{
"text": scope.index,
"color": "green",
"bold" : true,
"align": "center",
"size": 20,
"y": 190,
}],
"dataProvider":scope.chartdata,
"titleField": "title",
"valueField": "percent",
"fontSize": 14,
"labelRadius": 10,
"radius": "25%",
"innerRadius": "45%",
"labelText": "[[title]]",
"balloonText":"Sales Amt: $[[amt]]",
"showHandOnHover":true,
"export": {
"enabled": true
},
"responsive": {
"enabled": true,
"addDefaultRules": false,
"rules": [
{
"maxWidth": 400,
"overrides": {
"fontSize": 6,
"labelRadius": 5,
"radius": "20%",
"innerRadius": "40%",
"allLabels": [{
"text": "1.02",
"color": "green",
"bold" : true,
"align": "center",
"size": 10,
"y": 210,
}]
}
}
]
},
"pullOutOnlyOne":true,
"startEffect":"easeOutSine",
"pullOutEffect":"easeOutSine",
"listeners": [{
"event": "clickSlice",
"method": function(e) {
var dp = e.dataItem.dataContext;
scope.selectoption1=dp.title;
if(scope.selectoption1!="OTHERS"){
var object ={
"title":scope.selectoption1,
"id":dp.id
}
$rootScope.$emit('selecteddonutchartdep', object);
}
e.chart.validateData();
}
}]
})
};
Is there a way to show hand cursor on pie chart slice
回答1:
Here is the solution of your problem and this is the correct way to do this .. Below code and some css will do the magic.. AddClassname will add the appropriate class and effects that can make your graph a lot better and Css will add hand cursor only on the pie slice not on the overall area . Here is the fiddle.. https://jsfiddle.net/sahilweb6/wc8ezzn1/3/
Additional Script
"addClassNames": true,
"innerRadius": "30%",
"defs": {
"filter": [{
"id": "shadow",
"width": "200%",
"height": "200%",
"feOffset": {
"result": "offOut",
"in": "SourceAlpha",
"dx": 0,
"dy": 0
},
"feGaussianBlur": {
"result": "blurOut",
"in": "offOut",
"stdDeviation": 5
},
"feBlend": {
"in": "SourceGraphic",
"in2": "blurOut",
"mode": "normal"
}
}]
},
CSS
.amcharts-pie-slice {
transform: scale(1);
transform-origin: 50% 50%;
transition-duration: 0.3s;
transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
cursor: pointer;
box-shadow: 0 0 30px 0 #000;
}
.amcharts-pie-slice:hover {
transform: scale(1.1);
filter: url(#shadow);
}
回答2:
Add this in to the CSS
#chartdiv {
cursor: pointer;
}
It should give you what you want, but add the code to your question, so that anyone coming back here in the future can also see the full question and solution. There's no guarantee that your jsfiddle link will exist in the future.
来源：https://stackoverflow.com/questions/42199839/how-to-show-hand-cursor-on-pie-charts-slices-using-amcharts