Как динамически нарисовать разделитель на круговой диаграмме

Question

У меня есть круговая диаграмма в Highcharts, и я хотел бы иметь разделитель между каждым срезом, и я не могу понять, как это сделать.

Я знаю, что могу использовать borderWidth для этого, но этотакже помещает границу вокруг всего среза следующим образом: 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/