英文:
In amchart4 on hover border color not changing properly for PieChart
问题
I am trying to change border color on hover of PieChart in amchart4 but its not applying properly. In attached screenshot you can see for first slice border applying properly but for remaining two slices its not working correctly. Also sharing the codepen link where I am facing this issue.
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.PieChart);
// Add data
chart.data = [{
"country": "Lithuania",
"litres": 30
}, {
"country": "Czech Republic",
"litres": 30
}, {
"country": "Ireland",
"litres": 40
}];
// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.colors.list = [
am4core.color("#F18D8D"),
am4core.color("#EFCA4F"),
am4core.color("#4DB7F6"),
];
pieSeries.dataFields.value = "litres";
pieSeries.dataFields.category = "country";
// Let's cut a hole in our Pie chart the size of 40% the radius
chart.innerRadius = am4core.percent(40);
chart.logo.disabled = true;
// Put a thick white border around each Slice
pieSeries.slices.template.stroke = am4core.color("#506276");
pieSeries.slices.template.fillOpacity = 1;
pieSeries.slices.template.strokeWidth = 2;
pieSeries.slices.template.strokeOpacity = 1;
var hs = pieSeries.slices.template.states.getKey("hover");
hs.properties.stroke = am4core.color("white");
hs.properties.fillOpacity = 1;
hs.properties.strokeWidth = 2;
// Add a legend
chart.legend = new am4charts.Legend();
chart.legend = new am4charts.Legend();
chart.legend.itemContainers.template.togglable = false;
chart.legend.position = "bottom";
chart.legend.fontFamily = "sans";
chart.legend.fontSize = 8;
chart.legend.labels.template.fill = "#ffffff";
chart.legend.labels.template.opacity = "0.6";
chart.legend.valueLabels.template.fill = "#ffffff";
chart.legend.valueLabels.template.opacity = "0";
chart.legend.valueLabels.template.align = "left";
chart.legend.valueLabels.template.textAlign = "end";
chart.legend.itemContainers.template.paddingTop = 5;
chart.legend.itemContainers.template.paddingBottom = 5;
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 400px;
background-color: #555;
}
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>
Any help will be appreciated.
Here are the screenshots.
英文:
I am trying to change border color on hover of PieChart in amchart4 but its not applying properly. In attached screenshot you can see for first slice border applying properly but for remaining two slices its not working correctly. Also sharing the codepen link where I am facing this issue.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.PieChart);
// Add data
chart.data = [{
"country": "Lithuania",
"litres": 30
}, {
"country": "Czech Republic",
"litres": 30
}, {
"country": "Ireland",
"litres": 40
}];
// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.colors.list = [
am4core.color("#F18D8D"),
am4core.color("#EFCA4F"),
am4core.color("#4DB7F6"),
];
pieSeries.dataFields.value = "litres";
pieSeries.dataFields.category = "country";
// Let's cut a hole in our Pie chart the size of 40% the radius
chart.innerRadius = am4core.percent(40);
chart.logo.disabled = true;
// Put a thick white border around each Slice
pieSeries.slices.template.stroke = am4core.color("#506276");
pieSeries.slices.template.fillOpacity = 1;
pieSeries.slices.template.strokeWidth = 2;
pieSeries.slices.template.strokeOpacity = 1;
var hs = pieSeries.slices.template.states.getKey("hover");
hs.properties.stroke = am4core.color("white");
hs.properties.fillOpacity = 1;
hs.properties.strokeWidth = 2;
// Add a legend
chart.legend = new am4charts.Legend();
chart.legend = new am4charts.Legend();
chart.legend.itemContainers.template.togglable = false;
chart.legend.position = "bottom";
chart.legend.fontFamily = "sans";
chart.legend.fontSize = 8;
chart.legend.labels.template.fill = "#ffffff";
chart.legend.labels.template.opacity = "0.6";
chart.legend.valueLabels.template.fill = "#ffffff";
chart.legend.valueLabels.template.opacity = "0";
chart.legend.valueLabels.template.align = "left";
chart.legend.valueLabels.template.textAlign = "end";
chart.legend.itemContainers.template.paddingTop = 5;
chart.legend.itemContainers.template.paddingBottom = 5;
<!-- language: lang-css -->
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 400px;
background-color: #555;
}
<!-- language: lang-html -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>
<!-- end snippet -->
any help will be appreciated.
here are the screenshots.
答案1
得分: 1
这是因为切片的顺序不同。您应该将鼠标悬停的切片移到最前面:
pieSeries.slices.template.events.on("over", function(e){
e.target.toFront()
})
答案可在Git上找到。
英文:
This happens because of the order of slices. You should bring the hovered one to front:
pieSeries.slices.template.events.on("over", function(e){
e.target.toFront()
})
answer available on git.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论