如何在高图中制作带有数据边界半径的饼图

Question

我试图在两端绘制带有数据边界半径的高图。因为我提到Rounded corners in highcharts 但是在第一个数据中包含脚本和redius选项之后我没有得到圆角。

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

尝试： jsfiddle

我的要求： 我必须使数据边界半径如下图所示：

注意：

1.仅针对高级图系列中的第一个数据（两端）的圆角    2.不要两个数据之间有白线（请参阅jsfiddle）。

您的建议将不胜感激。

Answer 1

我不认为馅饼可以有圆角而不修改内部Highcharts代码。但是，您可以使用带有一些技巧的solidgauge图表来获得所需的结果 - 这种类型的图表具有设置圆角/方形大写字母的属性 - 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'
}]
};

实例和输出

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