在amchart4中,鼠标悬停时,饼图的边框颜色未正确变化。

huangapple go评论65阅读模式
英文:

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.

codepen link

// 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.

在amchart4中,鼠标悬停时,饼图的边框颜色未正确变化。

在amchart4中,鼠标悬停时,饼图的边框颜色未正确变化。

在amchart4中,鼠标悬停时,饼图的边框颜色未正确变化。

英文:

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.

codepen link

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// Create chart instance
var chart = am4core.create(&quot;chartdiv&quot;, am4charts.PieChart);
// Add data
chart.data = [{
&quot;country&quot;: &quot;Lithuania&quot;,
&quot;litres&quot;: 30
}, {
&quot;country&quot;: &quot;Czech Republic&quot;,
&quot;litres&quot;: 30
}, {
&quot;country&quot;: &quot;Ireland&quot;,
&quot;litres&quot;: 40
}];
// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.colors.list = [
am4core.color(&quot;#F18D8D&quot;),
am4core.color(&quot;#EFCA4F&quot;),
am4core.color(&quot;#4DB7F6&quot;),
];
pieSeries.dataFields.value = &quot;litres&quot;;
pieSeries.dataFields.category = &quot;country&quot;;
// Let&#39;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(&quot;#506276&quot;);
pieSeries.slices.template.fillOpacity = 1;
pieSeries.slices.template.strokeWidth = 2;
pieSeries.slices.template.strokeOpacity = 1;
var hs = pieSeries.slices.template.states.getKey(&quot;hover&quot;);
hs.properties.stroke = am4core.color(&quot;white&quot;);
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 = &quot;bottom&quot;;
chart.legend.fontFamily = &quot;sans&quot;;
chart.legend.fontSize = 8;
chart.legend.labels.template.fill = &quot;#ffffff&quot;;
chart.legend.labels.template.opacity = &quot;0.6&quot;;
chart.legend.valueLabels.template.fill = &quot;#ffffff&quot;;
chart.legend.valueLabels.template.opacity = &quot;0&quot;;
chart.legend.valueLabels.template.align = &quot;left&quot;;
chart.legend.valueLabels.template.textAlign = &quot;end&quot;;
chart.legend.itemContainers.template.paddingTop = 5;
chart.legend.itemContainers.template.paddingBottom = 5;

<!-- language: lang-css -->

body {
font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;
}
#chartdiv {
width: 100%;
height: 400px;
background-color: #555;
}

<!-- language: lang-html -->

&lt;script src=&quot;https://cdn.amcharts.com/lib/4/core.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.amcharts.com/lib/4/charts.js&quot;&gt;&lt;/script&gt;
&lt;div id=&quot;chartdiv&quot;&gt;&lt;/div&gt;

<!-- end snippet -->

any help will be appreciated.

here are the screenshots.

在amchart4中,鼠标悬停时,饼图的边框颜色未正确变化。

在amchart4中,鼠标悬停时,饼图的边框颜色未正确变化。

在amchart4中,鼠标悬停时,饼图的边框颜色未正确变化。

答案1

得分: 1

这是因为切片的顺序不同。您应该将鼠标悬停的切片移到最前面:

pieSeries.slices.template.events.on("over", function(e){
  e.target.toFront()
})

答案可在Git上找到。

git链接

英文:

This happens because of the order of slices. You should bring the hovered one to front:

pieSeries.slices.template.events.on(&quot;over&quot;, function(e){
e.target.toFront()
})

answer available on git.

git link

huangapple
  • 本文由 发表于 2023年5月17日 12:18:33
  • 转载请务必保留本文链接:https://go.coder-hub.com/76268530.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定