生活随笔
收集整理的這篇文章主要介紹了
highcharts图表高级入门之polar：极地图的基本配置以及一些关键配置说明
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
highcharts圖表組件內(nèi)的極地圖polar的實(shí)現(xiàn)和效果都還是很簡(jiǎn)單和美觀的。 1、需要設(shè)置chart的polar屬性為true；以表示是極地圖； 2、其他的設(shè)置和普通圖表就沒(méi)什么區(qū)別了的，這里附上一個(gè)完整的示例代碼：
highcharts圖表組件內(nèi)的極地圖polar的實(shí)現(xiàn)和效果都還是很簡(jiǎn)單和美觀的。
1、需要設(shè)置chart的polar屬性為true；以表示是極地圖；
2、其他的設(shè)置和普通圖表就沒(méi)什么區(qū)別了的，這里附上一個(gè)完整的示例代碼：
[html]?view plaincopy
$(function?()?{?? ????$('#container').highcharts({?? ????????chart:?{?? ??????????BackgroundColor:'#FFFF00',?????? ???????????plotBorderColor:'#FFE4B5',????? ???????????//plotBackgroundColor:'#FFFF00',?? ???????????polar:?true,?? ???????????type:?'line'?? ????????},?? ?????????? ????????title:?{?? ????????????text:?'測(cè)試結(jié)果只作為參考數(shù)值',?? ????????????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?//用來(lái)設(shè)置是否顯示‘打印’,'導(dǎo)出'等功能按鈕，不設(shè)置時(shí)默認(rèn)為顯示??? ????????????????},?? ????????plotOptions:?{?? ????????????enabled:?false,?? ????????????allowPointSelect:?false,?? ????????},?? ?????????? ????????series:?[{?? ????????????name:?'用戶(hù)測(cè)試',?? ????????????data:?[200,?300,?400,?500],?? ?????????????color:?'#FF0000',?? ????????????pointPlacement:?'on'?? ????????},?{?? ????????????name:?'標(biāo)準(zhǔn)',?? ????????????data:?[500,?500,?500,?500],?? ?????????????color:?'#FFF68F',?? ????????????pointPlacement:?'on'?? ????????}]?? ?????? ????});?? });??
注意：
1、如果不需要顯示y軸刻度值，可以通過(guò)設(shè)置yAxis內(nèi)的labels標(biāo)簽，如下所示：
[html]?view plaincopy
labels:{?? ????????????????enabled:false?//Y軸刻度值不顯示?? }??
2、如果不想顯示數(shù)據(jù)點(diǎn)的提示框可以設(shè)置tooltip的enabled為false
[html]?view plaincopy
tooltip:?{?? ????????????enabled:?false?? } ?
總結(jié)
以上是生活随笔為你收集整理的highcharts图表高级入门之polar：极地图的基本配置以及一些关键配置说明的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
