如何在高图中创建具有数据边界半径的饼图 [英] How to make pie chart with data border radius in highchart

问题描述

我试图在数据边界半径的两端绘制高图。为此我推荐

注意：

<对于highchart系列中的第一个数据（两端）。

2.不要在两个数据之间设置白线（请参阅jsfiddle）。

你的建议将不胜感激。

解决方案

我不认为没有修改内部的Highcharts代码，饼图可以有圆角。但是，您可以通过固定图表实现所需的结果，并带有一些欺骗性 - 此类图表具有设置四舍五入/方形上限的属性 -

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.

解决方案

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/

这篇关于如何在高图中创建具有数据边界半径的饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！