AmChart4 PieChart鼠标悬停边框颜色异常问题求助

问题描述 #

使用AmChart4开发环形饼图时，设置切片鼠标悬停时显示白色边框，仅第一个切片生效，其余切片的悬停边框未正常显示。

问题截图 #

• 第二个切片悬停异常：
• 第三个切片悬停异常：
• 第一个切片悬停正常：

问题原因 #

切片之间无间隙，悬停时的白色边框被相邻切片遮挡；同时未设置悬停切片的层级，导致非第一个切片的边框无法显示在最上层。

修复方案 #

在切片的hover状态中添加zIndex属性，让悬停切片处于最上层，同时给切片添加微小间隙确保边框完整显示：

修改后的核心代码如下：

// 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;
// 添加切片间隙，避免边框被完全遮挡
pieSeries.slices.template.sliceGap = 1;

var hs = pieSeries.slices.template.states.getKey("hover");
hs.properties.stroke = am4core.color("white");
hs.properties.fillOpacity = 1;
hs.properties.strokeWidth = 2;
// 设置悬停切片的层级，确保边框在最上层
hs.properties.zIndex = 1;

完整代码 #

JavaScript

// 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;
pieSeries.slices.template.sliceGap = 1;

var hs = pieSeries.slices.template.states.getKey("hover");
hs.properties.stroke = am4core.color("white");
hs.properties.fillOpacity = 1;
hs.properties.strokeWidth = 2;
hs.properties.zIndex = 1;

// Add a 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;

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;
}

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>

内容的提问来源于stack exchange，提问作者Kanekar