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
 }