javascript - 如何制作透明边框 Highcharts 饼图

Question

你好!

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

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

但是我的饼图/ donut chart 没有任何问题。

这里有没有人有这样做的经验？

Answer 1

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

Highcharts.chart('container', {
    chart: {
        // ...
        backgroundColor: 'black'
    },
    //...
    plotOptions: {
        pie: {
            borderWidth: 5,
            borderColor: 'black'
        }
    }

这是一个工作 fiddle : http://jsfiddle.net/by7xyr78/6/

编辑

由于您的背景是图像，因此边框颜色无法解决。不幸的是，据我所知，Highcharts 没有为饼图设置填充或边距的选项。您可以做些什么来获得接近您想要的结果的设置 sliced: true在您的所有系列数据中:

{
    name: 'Chrome',
    y: 61.41,
    sliced: true,
    color: 'rgba(255, 255, 255, 0.61)',
}

这是一个工作 fiddle : http://jsfiddle.net/j7krfc32/