Question

问候！

所以，我在html页面中使用highcharts创建了一个图表。这是一个圆环图或饼图。它具有适用于所有系列的白色，但每个系列具有不同的不透明度取决于数据的百分比。因此，如果系列A的所有数据中有20％，那么它将具有20％的透明白色。

不，我想为每一片系列腾出空间。所以我正在做的是将borderWidth设置为1，然后使用borderColor使其透明：'rgba（255,255,255,0）'。

但是我的馅饼/甜甜圈图表没什么好吃的。

这里有没有人有这方面的经验？

Answer 1

边框在SVG中内部。它不会在切片外添加任何像素。所以发生的事情是你在SVG上面绘制一个透明的边框，然后你就看不到了。要模拟您想要的内容，您只需将边框颜色设置为与背景颜色相同：

checkAllLoaded() {
  this.totalImages = this.totalImages - 1;
  if(this.totalImages === 0) {
     document.getElementById('splash').style.display = 'none';
     document.getElementById('window').classList.add('window-animation');
  }
}

这是一个工作小提琴：http://jsfiddle.net/by7xyr78/6/

修改

由于您的背景是图像，因此边框颜色无法解决问题。不幸的是，据我所知，Highcharts没有选择为饼图片设置填充或边距。您可以在所有系列数据中设置Highcharts.chart('container', { chart: { // ... backgroundColor: 'black' }, //... plotOptions: { pie: { borderWidth: 5, borderColor: 'black' } }，以便在您想要的位置附近获得结果：

sliced: true

这是一个工作小提琴：http://jsfiddle.net/j7krfc32/

如何制作透明边框Highcharts馅饼

1 个答案: