我正在尝试创建没有内轴的Polar Highchart(在里面制作空馅饼)。这里的其他人也提出了类似的问题解决方案:
this.options = {
chart: {
renderTo: 'container',
type: 'pie'
},
title: {
text: 'Browser market share, April, 2011'
},
series: [{
name: 'Browsers',
data: [["Firefox",6],["MSIE",4],["Chrome",7]],
size: '60%',
innerSize: '20%',
showInLegend:true,
dataLabels: {
enabled: false
}
}]
};
有没有人在图表中达到相同的效果:
this.options = {
chart: {
type: 'column',
polar: true
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
}]
};
答案 0 :(得分:1)
为了调整第二个图表的大小,您需要将pane.size
参数设置为等于第一个图表饼图系列的series.size
值,就像这样:
this.options = {
chart: {
type: 'column',
polar: true
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
pane: {
size: '60%'
}
};
API参考:https://api.highcharts.com/highcharts/pane.size
实例:http://plnkr.co/edit/TZiv6POxjmaemk6cpBJc?p=preview
= = = =
修改强>
获取更多指定信息后(在下面的评论中),答案已完全改变。 我们没有在极坐标图表类型中实现这样的功能。
但是,所有这些都不会丢失,因为您可以通过添加一些自定义代码来获得此效果。
首先,您需要使用renderer
事件上的chart.load
对象在图表中心渲染圆圈:
events: {
load: function() {
var chart = this
var center = [chart.chartWidth / 2, chart.chartHeight / 2]
// Render custom circle on the center of the chart
chart.renderer.circle(center[0], center[1], 45)
.attr({
fill: '#fff',
stroke: '#ddd',
'stroke-width': 1,
zIndex: 6 // Set Z iIndex smaller than zIndex of yAxis Labels to avoid overlapping
})
.add()
}
}
然后,您需要稍微调整yAxis,即将Axis.min
设置为等于某个负值,以使0
刻度位于绘图区域的可见部分的中间。
yAxis: {
min: -130
}
最后,您需要使用yAxis
功能隐藏第一个labels.formatter
标签:
yAxis: {
min: -130,
labels: {
// Hide first axis label
formatter: function() {
return this.isFirst ? '' : this.value
}
}
}