如何在highchart中制作带有数据边框半径的饼图答案

【问题标题】：How to make pie chart with data border radius in highchart如何在highchart中制作带有数据边框半径的饼图
【发布时间】：2017-02-17 20:08:21
【问题描述】：

我正在尝试在两端绘制带有数据边框半径的高图。为此我引用了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）。

您的建议将不胜感激。

【问题讨论】：

标签： highcharts rounded-corners

【解决方案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/

【讨论】：