如何动态绘制一个饼图上的一个分离器

Question

我在Highcharts饼图，我想有每片之间的分隔符，我无法弄清楚如何做到这一点。

我知道我可以使用边框宽度要做到这一点，但这也使边框一整片这样的周围：https://jsfiddle.net/rymfdacp/1/

我能想到的唯一的办法就是使用chart.renderer.path得出这样一行：

chart.renderer.path(['M', 301.9728096273067, 67.50000276897518,'L', 299.2807325002842, 107.16355788480266])//M 75 223.5 L 593 223.5
        .attr({
            'stroke-width': 1.5,
            stroke: '#0a0a26'
        })
        .add();

你可以在这里看到一个完整的例子：https://jsfiddle.net/rymfdacp/

现在我想的东西，是自动使这些线切片/数据分开。

或者，如果有人有一个更好或更简单的解决方案，我将所有的耳朵！

Answer 1

实现这一目标最简单的方法是设置边框颜色相同的背景。检查下面的演示发布。

您可以使用渲染器，但是，这个解决方案要困难得多。

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'pie',
    styledMode: false,
    events: {
    	load: function() {
      	console.log(this);
      }
    }
  },
  plotOptions: {
    pie: {
      borderWidth: 2,
      borderColor: '#fff',
      colors: [
        '#1cbbbe',
        '#1cbbbe',
      ],
      animation: false,
      innerSize: '70%',
      dataLabels: {
        enabled: true,
        format: '<b>{point.percentage:.1f}</b><br />{point.name}',
        distance: 40,
        filter: {
          property: 'percentage',
          operator: '>',
          value: 3
        },
        style: {
          color: '#000',
          fontWeight: 'bold',
          fontSize: '14px'
        },
        shadow: false,
        connectorShape: 'crookedLine',
        connectorColor: 'rgba(27, 186, 190, 0.5)'
      }
    }
  },
  title: {
    floating: true,
    color: 'black',
    text: '<span class="title-first">Balance</span><br/>356<br/>Total Paid',
    x: 0,
    y: 180,
    style: {
      color: 'black',
      fontWeight: 'bold',
    }
  },
  tooltip: {
    enabled: true,
    useHTML: false,
    style: {
      zIndex: 25
    }
  },
  series: [{
    data: [
      ['Unconfirmed Balance', 9.2668],
      ['Unpaid Balance', 78.8788],
    ]
  }]
}, function(chart) { // on complete
  var gradient = {
    linearGradient: [0, 0, 0, 400],
    stops: [
      [0, '#1b4b5a'],
      [1, '#3a8293']
    ]
  };
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

演示：

• https://jsfiddle.net/BlackLabel/3c7fw1uj/