highcharts圖表高級入門之polar：極地圖的基本配置以及一些關鍵配置說明

highcharts圖表組件內的極地圖polar的實現和效果都還是很簡單和美觀的。 1、需要設置chart的polar屬性為true；以表示是極地圖； 2、其他的設置和普通圖表就沒什么區別了的，這里附上一個完整的示例代碼：

highcharts圖表組件內的極地圖polar的實現和效果都還是很簡單和美觀的。

1、需要設置chart的polar屬性為true；以表示是極地圖；

2、其他的設置和普通圖表就沒什么區別了的，這里附上一個完整的示例代碼：

[html]?view plaincopy
  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 plaincopy
  1. labels:{??
  2. ????????????????enabled:false?//Y軸刻度值不顯示??
  3. }??

2、如果不想顯示數據點的提示框可以設置tooltip的enabled為false

[html]?view plaincopy
  1. tooltip:?{??
  2. ????????????enabled:?false??
  3. } ?

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/247793.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/247793.shtml
英文地址，請注明出處：http://en.pswp.cn/news/247793.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

基于Element ui 實現輸入框只能輸入數字并支持千分位

基于Element ui 實現輸入框只能輸入數字并支持千分位

實現效果 設置子組件 <template><el-inputref"money"v-model.trim"money":placeholder"placeholder"v-bind"$attrs"v-on"$listeners"input"formatNumber(money,money)"keyup.enter.native"moneyCh…
閱讀更多...
Vue-使用webpack+vue-cli搭建項目

Vue-使用webpack+vue-cli搭建項目

一、準備 安裝NodeJs 安裝Webpack 配置環境變量 技巧使用&#xff1a; 1. npm 淘寶路徑配置&#xff1a;npm config set registryhttps://registry.npm.taobao.org　　2.查看npm命令列表 > $ npm help 二、搭建項目 1、全局安裝vue腳手架工具 vue-cli npm install vue…
閱讀更多...
element 日歷組件-自定義內容

element 日歷組件-自定義內容

這只是個子組件 <template><div ref"topBox" class"swiper-in page-container bg-white"><div class"w-full page-head">我的排班<i class"close-btn el-icon-close" click"closeCurrentPage"><…
閱讀更多...
CSS-合理使用z-index控制盒子視軸高度，解決z-index失效

CSS-合理使用z-index控制盒子視軸高度，解決z-index失效

關于z-index我們的共識 共識一 首先&#xff0c;我們都同意&#xff0c;z-index對于普通盒子是無效的&#xff0c;這里的“普通盒子”是除了下文我會提到的“神奇盒子”外的所有盒子&#xff0c;至于什么是“神奇盒子”請慢慢看。 對于普通盒子&#xff0c;不管z-index值如何&…
閱讀更多...
Activiti6.0教程 Eclipse安裝Activiti Diagram插件（一）

Activiti6.0教程 Eclipse安裝Activiti Diagram插件（一）

最近這段時間打算出一個Activiti6.0的詳細教程&#xff0c;Activiti作為一個流行的開源工作流引擎&#xff0c;正在不斷發展&#xff0c;其6.0版本以API形式提供服務&#xff0c;而之前版本基本都是要求我們的應用以JDK方式與其交互&#xff0c;只能將其攜帶到我們的應用中&…
閱讀更多...
JS性能優化之文檔碎片-document.createDocumentFragment

JS性能優化之文檔碎片-document.createDocumentFragment

講這個方法之前&#xff0c;我們應該先了解下插入節點時瀏覽器會做什么。 在瀏覽器中&#xff0c;我們一旦把節點添加到document.body&#xff08;或者其他節點&#xff09;中&#xff0c;頁面就會更新并反映出這個變化&#xff0c;對于少量的更新&#xff0c;一條條循…
閱讀更多...
man(2) W

man(2) W

wait(2) wait3(2) wait4(2) waitpid(2) waitid(2) SEE ALSO _exit(2), clone(2), fork(2), kill(2), ptrace(2), sigaction(2), sig‐ nal(2), wait4(2), pthread_create(3), credentials(7), signal(7)轉載于:https://www.cnblogs.com/xpylovely/p/11018021.html
閱讀更多...
window.onload和$(document).ready(function(){})的區別

window.onload和$(document).ready(function(){})的區別

前段時間在面試之前查找并整理了一下window.onload和$(document).ready(function(){})區別&#xff0c;今天有時間更到我的博客上&#xff0c;由于本人資歷尚淺&#xff0c;如有不對的地方&#xff0c;還請指正。 原文出自&#xff1a;http://www.php100.com/html/program/jque…
閱讀更多...
任務計劃

任務計劃

普及組題庫:(94/100) luogu: 網絡流&#xff1a;P2423,P2055,P3191,P3153,P2598,P4174 線段樹&#xff1a;P1712,P4145,P4868,P2619,P2572,P4247,P4246,P4198 ST表&#xff1a;P2880 DFS序(或歐拉序)線段樹&#xff1a;P3178,P3459 樹鏈剖分&#xff1a;P3384,P3379,P4315,P248…
閱讀更多...
左右滑動欄

左右滑動欄

展示效果圖&#xff1a; 父 <template><div ref"topBox" class"swiper-in page-container bg-white"><div class"page-body"><drag-box class"drag-box"><div class"relative" :class"{ex…
閱讀更多...
Active MQ

Active MQ

轉載于:https://www.cnblogs.com/ygl888/p/11020647.html
閱讀更多...
jQuery Ajax 實例

jQuery Ajax 實例

一、$.ajax的一般格式 $.ajax({ type: POST, url: url , data: data , success: success , dataType: dataType }); 二、$.ajax的參數描述 參數 描述 url 必需。規定把請求發送到哪個 URL。 data 可選。映射或字符串值。規定連同請求發送到服務器的數據。 success(data, textSt…
閱讀更多...
element ui封裝 tree下拉框

element ui封裝 tree下拉框

展示&#xff1a; 子組件封裝 <!-- 樹狀選擇器 科室樹形 --> <template><el-popoverref"popover"placement"bottom-start"trigger"click"show"onShowPopover"hide"onHidePopover"><el-treeref&quo…
閱讀更多...
Sitecore A / B測試

Sitecore A / B測試

測試您的Web內容非常重要。這是查看頁面中的頁面和組件是否達到預期效果的好方法。測試還可以讓您放心&#xff0c;您的內容足夠吸引人&#xff0c;以增加轉化次數并最大限度地提高增長率。 測試如何運作&#xff1f; 測試通過向訪問者隨機顯示不同版本的內容來工作。Sitecore …
閱讀更多...
jQuery on()方法綁定動態元素的點擊事件無響應的解決辦法

jQuery on()方法綁定動態元素的點擊事件無響應的解決辦法

$(#check_all).on(click , function(){ alert(1); }); $("#yujinlist").append(html); count; } 以上代碼執行時&#xff0c;點擊#check_all時&#xff0c;alert一直沒反應&#xff0c;后在網上查資料時&#xff0c;才知道on前面的元素也必須在頁面加載的時候就存在…
閱讀更多...
讓數字保持在整數范圍內

讓數字保持在整數范圍內

讓數字保存在整數范圍內 如&#xff1a; (1~10)之間的數取 10 (10~20)之間的數取 20 (20~30)之間的數取 30 let max (Math.round(數字/10)1)*10
閱讀更多...
UVA572 Oil Deposits DFS求解

UVA572 Oil Deposits DFS求解

小白書上經典DFS題目。 1. 遞歸實現 // from: https://www.cnblogs.com/huaszjh/p/4686092.html#include <stdio.h> #include <string.h> #define maxn 105 unsigned char data[maxn][maxn]; int m, n, vis[maxn][maxn];void dfs(int x, int y, int ans) {if (x &l…
閱讀更多...
HTML 表格中的行合并與列合并

HTML 表格中的行合并與列合并

colspan是橫向合并&#xff1b;rowspan是縱向合并。colspan是“column span&#xff08;跨列&#xff09;”的縮寫。colspan屬性用在td標簽中&#xff0c;用來指定單元格橫向跨越的列數&#xff1a;單元格1 單元格2 單元格3 單元格4 該例通過把colspan設為“3”, 令所在單元格橫…
閱讀更多...
java快速排序

java快速排序

package com.atguigu.java;/*** 快速排序* 通過一趟排序將待排序記錄分割成獨立的兩部分&#xff0c;其中一部分記錄的關鍵字均比另一部分關鍵字小&#xff0c;* 則分別對這兩部分繼續進行排序&#xff0c;直到整個序列有序。*/ public class QuickSort {private static void s…
閱讀更多...
網址備份

網址備份

1.jstl標簽庫http://archive.apache.org/dist/jakarta/taglibs/standard/binaries/2.tomcat服務器http://tomcat.apache.org/3.mysql架包https://mvnrepository.com/4.jqueryhttps://github.com/jquery/jquery/releases5.圖標http://icons8.com/preloaders6.jquery-formhttp://…
閱讀更多...
最新文章

Copyright @ 2022~2023