2
我在极坐标图定制方面存在问题。我想要两个嵌套的圆圈。Highchart极坐标图2嵌套圈
Here's the fiddle，这是结果，我想获得：
- 预期结果：
$(function() {
var data = [{"name":"ビタミンA","y":3650,"color":"#9fe642","bg_color":"#F9D5B5","compare":"過剰"},{"name":"ビタミンB1","y":2783,"color":"#274ffb","bg_color":"#BBDEE8","compare":"不足"},{"name":"ビタミンB2","y":3616,"color":"#705ba4","bg_color":"#D8E4BE","compare":"適度"},{"name":"ビタミンC","y":3661,"color":"#a54593","bg_color":"#F9D5B5","compare":"過剰"},{"name":"カルシウム","y":2783,"color":"#d1d700","bg_color":"#BBDEE8","compare":"不足"},{"name":"鉄","y":3615,"color":"#06675e","bg_color":"#BBDEE8","compare":"不足"}];
Highcharts.chart('polar-chart', {
chart: {
polar: true
},
title: {
text: ''
},
pane: {
startAngle: 0,
endAngle: 360,
background: [
{
backgroundColor: {
linearGradient: {x1: 1, y1: 1, x2: 1, y2: 1},
stops: [
[0, '#FFF'],
[1, '#F9D5B5']
]
},
borderWidth: 0,
outerRadius: '100%'
}
]
},
xAxis: {
tickInterval: 60,
min: 0,
max: 360,
labels: {
formatter: function() {
if (this.value == 0) {
return 'ビタミンA';
} else if (this.value == 60) {
return 'ビタミンB1';
} else if (this.value == 120) {
return 'ビタミンB2';
} else if (this.value == 180) {
return 'ビタミンC';
} else if (this.value == 240) {
return 'カルシウム';
} else {
return '鉄';
}
}
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 60,
dataLabels: {
enabled: false,
format: ''
}
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'line',
name: 'Nutrition',
data: data,
showInLegend: false,
zIndex: 3,
},
{
type: 'column',
name: 'Line',
data: [{
color: "#BBDEE8",
y: 5000
}, {
color: "#BBDEE8",
y: 5000
}, {
color: "#BBDEE8",
y: 5000
}, {
color: "#BBDEE8",
y: 5000
}, {
color: "#BBDEE8",
y: 5000
}, {
color: "#BBDEE8",
y: 5000
}],
zIndex: 2,
pointPlacement: 'between',
showInLegend: false,
},
{
type: 'column',
name: 'Line',
data: [{
color: "#D8E4BE",
y: 7000
}, {
color: "#D8E4BE",
y: 7000
}, {
color: "#D8E4BE",
y: 7000
}, {
color: "#D8E4BE",
y: 7000
}, {
color: "#D8E4BE",
y: 7000
}, {
color: "#D8E4BE",
y: 7000
}, {
color: "#D8E4BE",
y: 7000
}],
zIndex: 1,
pointPlacement: 'between',
showInLegend: false,
},
]
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="polar-chart" style="min-width: 310px; max-width: 400px; height: 400px; margin: 0 auto"></div>