如何在highchart中制作带有数据边界半径的饼图
How to make pie chart with data border radius in highchart
我正在尝试在我引用的两个 end.for 中绘制带有数据边界半径的高图 高图中的圆角
但在第一个数据中包含脚本和 redius 选项后我没有得到圆角。
<script src="https://rawgithub.com/highslide-software/rounded-corners/master/rounded-corners.js"></script>
borderRadiusTopLeft: 40,
borderRadiusTopRight: 40,
尝试过:
jsfiddle
我的要求:
我必须像下面的附图那样制作数据边界半径:
注:
1.Need highchart 系列中的第一个数据(两端)仅圆角。
2.Don不想要两个数据之间的白线(参考 jsfiddle)。
您的建议将不胜感激。
我认为如果不修改内部 Highcharts 代码,饼图不可能有圆角。但是,您可以使用带有一些技巧的 solidgauge 图表获得所需的结果 - 这种类型的图表有 属性 设置 rounded/square 上限 - 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/
我正在尝试在我引用的两个 end.for 中绘制带有数据边界半径的高图 高图中的圆角 但在第一个数据中包含脚本和 redius 选项后我没有得到圆角。
<script src="https://rawgithub.com/highslide-software/rounded-corners/master/rounded-corners.js"></script>
borderRadiusTopLeft: 40,
borderRadiusTopRight: 40,
尝试过: jsfiddle
我的要求: 我必须像下面的附图那样制作数据边界半径:
注:
1.Need highchart 系列中的第一个数据(两端)仅圆角。
2.Don不想要两个数据之间的白线(参考 jsfiddle)。
您的建议将不胜感激。
我认为如果不修改内部 Highcharts 代码,饼图不可能有圆角。但是,您可以使用带有一些技巧的 solidgauge 图表获得所需的结果 - 这种类型的图表有 属性 设置 rounded/square 上限 - 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/