为什么我的极坐标图呈现为折线图?(Highcharts最新版本)

Question

我在网上遵循了一些说明和教程，但未能创建极坐标图。

它以一个正常的折线图结束。

我的代码出了什么问题？有什么建议吗？

谢谢，

Highcharts.chart('container', {
title: {
text: null
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '{point.y}'
},
pane: {
size: '95%'
},
chart: {
type: 'area',
polar: true,
spacingTop: 0
},
credits: {
enabled: false
},
xAxis: {
categories: ["John","Weta","Marry"],
tickmarkPlacement: 'on',
lineWidth: 2,
labels: {
style: {
fontSize: window.screenshotMode ? '36px' : '18px'
}
}
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 2,
min: 0,
max: 100,
labels: {
style: {
fontSize: window.screenshotMode ? '36px' : '18px'
}
}
},
plotOptions: {
series: {
borderWidth: 4,
borderColor: '#a00'
}
},
series: [{
data: [68,97,964]
}]
})

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

Answer 1

运行极坐标图需要更多的highchart，因此需要包含highchart-more.js库。

<script src="https://code.highcharts.com/highcharts-more.js"></script>

Highcharts.chart('container', {
title: {
text: null
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '{point.y}'
},
pane: {
size: '95%'
},
chart: {
type: 'area',
polar: true,
spacingTop: 0
},
credits: {
enabled: false
},
xAxis: {
categories: ["John","Weta","Marry"],
tickmarkPlacement: 'on',
lineWidth: 2,
labels: {
style: {
fontSize: window.screenshotMode ? '36px' : '18px'
}
}
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 2,
min: 0,
max: 100,
labels: {
style: {
fontSize: window.screenshotMode ? '36px' : '18px'
}
}
},
plotOptions: {
series: {
borderWidth: 4,
borderColor: '#a00'
}
},
series: [{
data: [68,97,964]
}]
})

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="height: 400px"></div>

API参考：https://api.highcharts.com/highcharts/chart.polar