highcharts圖表高階入門之polar:極地圖的基本配置以及一些關鍵配置說明(轉載)
阿新 • • 發佈:2018-12-31
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,感謝原文作者分享