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

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

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

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

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

[html]  view plain  copy
  1. $(function () {  
  2.     $('#container').highcharts({  
  3.         chart: {  
  4.           BackgroundColor:'#FFFF00',      
  5.            plotBorderColor:'#FFE4B5',     
  6.            //plotBackgroundColor:'#FFFF00',  
  7.            polar: true,  
  8.            type: 'line'  
  9.         },  
  10.           
  11.         title: {  
  12.             text: '测试结果只作为参考数值',  
  13.             x: -50  
  14.         },  
  15.         pane: {  
  16.             size: '70%'  
  17.         },  
  18.           
  19.         xAxis: {  
  20.             categories: [ '钙(单位:mg)','维生素D<br />(单位:IU)', 'DHA(单位:mg)', '维生素A<br />(单位:IU)'],  
  21.             labels: {  
  22.                 style: {  
  23.                     color: 'red',  
  24.                     fontSize:'8px'  
  25.                 }  
  26.             },  
  27.   
  28.             tickmarkPlacement: 'on',  
  29.             lineWidth: 0,  
  30.             gridLineColor:'#FFFF00',  
  31.             lineColor:'#24CBE5',  
  32.         },  
  33.               
  34.         yAxis: {  
  35.             gridLineInterpolation: 'polygon',  
  36.             lineWidth: 0,  
  37.             gridLineColor:'#FFFF00',  
  38.             min: 0,  
  39.             labels:{  
  40.                 enabled:false //Y轴刻度值不显示  
  41.             }  
  42.         },  
  43.           
  44.         tooltip: {  
  45.             enabled: true,  
  46.             shared: true,  
  47.             pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}b><br/>'  
  48.         },        
  49.         credits:{  
  50.             enabled: false,  
  51.         },        
  52.         legend: {  
  53.             align: 'center',  
  54.             verticalAlign: 'top',  
  55.             enabled: false,  
  56.             y: 70,  
  57.             layout: 'vertical'  
  58.         },  
  59.         exporting:{   
  60.                      enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮,不设置时默认为显示   
  61.                 },  
  62.         plotOptions: {  
  63.             enabled: false,  
  64.             allowPointSelect: false,  
  65.         },  
  66.           
  67.         series: [{  
  68.             name: '用户测试',  
  69.             data: [200, 300, 400, 500],  
  70.              color: '#FF0000',  
  71.             pointPlacement: 'on'  
  72.         }, {  
  73.             name: '标准',  
  74.             data: [500, 500, 500, 500],  
  75.              color: '#FFF68F',  
  76.             pointPlacement: 'on'  
  77.         }]  
  78.       
  79.     });  
  80. });  

注意:

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

[html]  view plain  copy
  1. labels:{  
  2.                 enabled:false //Y轴刻度值不显示  
  3. }  

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

[html]  view plain  copy
  1. tooltip: {  
  2.             enabled: false  
  3. }  

你可能感兴趣的:(前端插件,highcharts)