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/

如何在饼图上动态绘制分隔符

1 个答案: