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.mzph.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