highcharts图表高级入门之polar：极地图的基本配置以及一些关键配置说明（转载）

highcharts图表组件内的极地图polar的实现和效果都还是很简单和美观的。 1、需要设置chart的polar属性为true；以表示是极地图； 2、其他的设置和普通图表就没什么区别了的，这里附上一个完整的示例代码：

highcharts图表组件内的极地图polar的实现和效果都还是很简单和美观的。

1、需要设置chart的polar属性为true；以表示是极地图；

2、其他的设置和普通图表就没什么区别了的，这里附上一个完整的示例代码：

$(function () {
$('#container').highcharts({
chart: {
BackgroundColor:'#FFFF00',
plotBorderColor:'#FFE4B5',
//plotBackgroundColor:'#FFFF00',
polar: true,
type: 'line'
},

title: {
text: '测试结果只作为参考数值',
x: -50
},
pane: {
size: '70%'
},

xAxis: {
categories: [ '钙(单位:mg)','维生素D<br />(单位:IU)', 'DHA(单位:mg)', '维生素A<br />(单位:IU)'],
labels: {
style: {
color: 'red',
fontSize:'8px'
}
},

tickmarkPlacement: 'on',
lineWidth: 0,
gridLineColor:'#FFFF00',
lineColor:'#24CBE5',
},

yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
gridLineColor:'#FFFF00',
min: 0,
labels:{
enabled:false //Y轴刻度值不显示
}
},

tooltip: {
enabled: true,
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
credits:{
enabled: false,
},
legend: {
align: 'center',
verticalAlign: 'top',
enabled: false,
y: 70,
layout: 'vertical'
},
exporting:{
enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
},
plotOptions: {
enabled: false,
allowPointSelect: false,
},

series: [{
name: '用户测试',
data: [200, 300, 400, 500],
color: '#FF0000',
pointPlacement: 'on'
}, {
name: '标准',
data: [500, 500, 500, 500],
color: '#FFF68F',
pointPlacement: 'on'
}]

});
});

注意：

1、如果不需要显示y轴刻度值，可以通过设置yAxis内的labels标签，如下所示：

labels:{
enabled:false //Y轴刻度值不显示
}

2、如果不想显示数据点的提示框可以设置tooltip的enabled为false

tooltip: {
enabled: false
}

原文来自http://www.stepday.com/topic/?682，感谢原文作者分享