highcharts圖表組件內的極地圖polar的實現和效果都還是很簡單和美觀的。 1、需要設置chart的polar屬性為true；以表示是極地圖； 2、其他的設置和普通圖表就沒什么區別了的，這里附上一個完整的示例代碼：
highcharts圖表組件內的極地圖polar的實現和效果都還是很簡單和美觀的。
1、需要設置chart的polar屬性為true；以表示是極地圖；
2、其他的設置和普通圖表就沒什么區別了的，這里附上一個完整的示例代碼：
[html]?view plaincopy
$(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標簽，如下所示：
[html]?view plaincopy
labels:{?? ????????????????enabled:false?//Y軸刻度值不顯示?? }??
2、如果不想顯示數據點的提示框可以設置tooltip的enabled為false
[html]?view plaincopy
tooltip:?{?? ????????????enabled:?false?? } ?
總結
以上是生活随笔為你收集整理的highcharts图表高级入门之polar：极地图的基本配置以及一些关键配置说明的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
