How to make pie chart with data border radius in h

问题:

I am trying to plot the highchart with data border radius in both end.for that i refered Rounded corners in highcharts but i didn't get Round corners after include script and redius option in first data.

<script src="https://rawgithub.com/highslide-software/rounded-corners/master/rounded-corners.js"></script> 
    borderRadiusTopLeft: 40,
    borderRadiusTopRight: 40,

Tried: jsfiddle

My requirements: I have to make data border radius like a below attached figure:

Note:

1.Need Round corners only for first data(both end) in series of the highchart.
2.Don't want white line between two data(refer jsfiddle).

Your suggestion will be grateful.

回答1:

I do not think a pie can have rounded corners without modifying internal Highcharts code. However, you can achieve the desired result with a solidgauge chart with some trickery - this type of chart has property to set rounded/square caps - solidgauge.linecap.

var gaugeOptions = {

chart: {
  type: 'solidgauge'
},

yAxis: {
  visible: false,
  min: 0,
  max: 2
},

tooltip: {
  enabled: false
},

plotOptions: {
  solidgauge: {
    dataLabels: {
      enabled: false
    },
    borderColor: '#0883ce',
    borderWidth: 15,
    radius: '100%',
    innerRadius: '100%'
  }
},
series: [{
  borderColor: '#b9b9b9',
  borderWidth: 14,
  data: [1.5]
}, {
  data: [0],
  enableMouseTracking: false
}, {
  data: [1],
  linecap: 'square'
}]
};

Live example and output

http://jsfiddle.net/Penstrife/1s8sfqtn/