highcharts 柱状图 数值太小不显示问题_ppt柱状图数据太小看不出来-程序员宅基地

技术标签: 前端  

 

在配置中加入这行代码

	plotOptions: {
		series: {
			borderWidth: 0,
			dataLabels: {
				enabled: true,
				format: '{point.y:.1f}%'
			}
		}

 

 

可以将小的数据显示在柱状图上

 

Highcharts.chart('container', {
	chart: {
		type: 'column'
	},
	title: {
		text: '2015年1月-5月,各浏览器的市场份额'
	},
	subtitle: {
		text: '点击可查看具体的版本数据,数据来源: <a href="https://netmarketshare.com">netmarketshare.com</a>.'
	},
	xAxis: {
		type: 'category'
	},
	yAxis: {
		title: {
			text: '总的市场份额'
		}
	},
	legend: {
		enabled: false
	},
	plotOptions: {
		series: {
			borderWidth: 0,
			dataLabels: {
				enabled: true,
				format: '{point.y:.1f}%'
			}
		}
	},
	tooltip: {
		headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
		pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
	},
	series: [{
		name: '浏览器品牌',
		colorByPoint: true,
		data: [{
			name: 'Microsoft Internet Explorer',
			y: 56.33,
			drilldown: 'Microsoft Internet Explorer'
		}, {
			name: 'Chrome',
			y: 24.03,
			drilldown: 'Chrome'
		}, {
			name: 'Firefox',
			y: 10.38,
			drilldown: 'Firefox'
		}, {
			name: 'Safari',
			y: 4.77,
			drilldown: 'Safari'
		}, {
			name: 'Opera',
			y: 0.91,
			drilldown: 'Opera'
		}, {
			name: 'Proprietary or Undetectable',
			y: 0.2,
			drilldown: null
		}]
	}],
	drilldown: {
		series: [{
			name: 'Microsoft Internet Explorer',
			id: 'Microsoft Internet Explorer',
			data: [
				[
					'v11.0',
					24.13
				],
				[
					'v8.0',
					17.2
				],
				[
					'v9.0',
					8.11
				],
				[
					'v10.0',
					5.33
				],
				[
					'v6.0',
					1.06
				],
				[
					'v7.0',
					0.5
				]
			]
		}, {
			name: 'Chrome',
			id: 'Chrome',
			data: [
				[
					'v40.0',
					5
				],
				[
					'v41.0',
					4.32
				],
				[
					'v42.0',
					3.68
				],
				[
					'v39.0',
					2.96
				],
				[
					'v36.0',
					2.53
				],
				[
					'v43.0',
					1.45
				],
				[
					'v31.0',
					1.24
				],
				[
					'v35.0',
					0.85
				],
				[
					'v38.0',
					0.6
				],
				[
					'v32.0',
					0.55
				],
				[
					'v37.0',
					0.38
				],
				[
					'v33.0',
					0.19
				],
				[
					'v34.0',
					0.14
				],
				[
					'v30.0',
					0.14
				]
			]
		}, {
			name: 'Firefox',
			id: 'Firefox',
			data: [
				[
					'v35',
					2.76
				],
				[
					'v36',
					2.32
				],
				[
					'v37',
					2.31
				],
				[
					'v34',
					1.27
				],
				[
					'v38',
					1.02
				],
				[
					'v31',
					0.33
				],
				[
					'v33',
					0.22
				],
				[
					'v32',
					0.15
				]
			]
		}, {
			name: 'Safari',
			id: 'Safari',
			data: [
				[
					'v8.0',
					2.56
				],
				[
					'v7.1',
					0.77
				],
				[
					'v5.1',
					0.42
				],
				[
					'v5.0',
					0.3
				],
				[
					'v6.1',
					0.29
				],
				[
					'v7.0',
					0.26
				],
				[
					'v6.2',
					0.17
				]
			]
		}, {
			name: 'Opera',
			id: 'Opera',
			data: [
				[
					'v12.x',
					0.34
				],
				[
					'v28',
					0.24
				],
				[
					'v27',
					0.17
				],
				[
					'v29',
					0.16
				]
			]
		}]
	}
});

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/resilient/article/details/103850863

智能推荐

台式计算机cpu允许温度,玩游戏cpu温度多少正常(台式电脑夏季CPU一般温度多少)...-程序员宅基地

文章浏览阅读1.1w次。随着炎热夏季的到来,当玩游戏正爽的时候,电脑突然死机了,自动关机了,是不是有想给主机一脚的冲动呢?这个很大的原因是因为CPU温度过高导致的。很多新手玩家可能都有一个疑虑,cpu温度多少以下正常?有些说是60,有些说是70,到底多高CPU温度不会死机呢?首先我们先看看如何查看CPU的温度。下载鲁大师并安装,运行鲁大师软件,即可进入软件界面,并点击温度管理,即可看到电脑各个硬件的温度。鲁大师一般情况下..._台式机玩游戏温度多少正常

小白自学Python日记 Day2-打印打印打印!_puthon打印任务收获-程序员宅基地

文章浏览阅读243次。Day2-打印打印打印!我终于更新了!(哭腔)一、 最简单的打印最最简单的打印语句: print(“打印内容”)注意:python是全英的,符号记得是半角下面是我写的例子:然后进入power shell ,注意:你需要使用cd来进入你保存的例子的文件夹,保存时名字应该取为xxx.py我终于知道为什么文件夹取名都建议取英文了,因为进入的时候是真的很麻烦!如果你没有进入正确的文件夹..._puthon打印任务收获

Docker安装:Errors during downloading metadata for repository ‘appstream‘:_"cenerrors during download metadata for repository-程序员宅基地

文章浏览阅读1k次。centos8问题参考CentOS 8 EOL如何切换源? - 云服务器 ECS - 阿里云_"cenerrors during download metadata for repository \"appstream"

尚硅谷_谷粒学苑-微服务+全栈在线教育实战项目之旅_基于微服务的在线教育平台尚硅谷-程序员宅基地

文章浏览阅读2.7k次,点赞3次,收藏11次。SpringBoot+Maven+MabatisPlusmaven在新建springboot项目引入RELEASE版本出错maven在新建springboot项目引入RELEASE版本出错maven详解maven就是通过pom.xml中的配置,就能够从仓库获取到想要的jar包。仓库分为:本地仓库、第三方仓库(私服)、中央仓库springframework.boot:spring-boot-starter-parent:2.2.1.RELEASE’ not found若出现jar包下载不了只有两_基于微服务的在线教育平台尚硅谷

java 实现 数据库备份_java数据备份-程序员宅基地

文章浏览阅读1k次。数据库备份的方法第一种:使用mysqldump结合exec函数进行数据库备份操作。第二种:使用php+mysql+header函数进行数据库备份和下载操作。下面 java 实现数据库备份的方法就是第一种首先我们得知道一些mysqldump的数据库备份语句备份一个数据库格式:mysqldump -h主机名 -P端口 -u用户名 -p密码 --database 数据库名 ..._java数据备份

随便推点

iOS NSTimer定时器-程序员宅基地

文章浏览阅读2.6k次。iOS中定时器有三种,分别是NSTimer、CADisplayLink、dispatch_source,下面就分别对这三种计时器进行说明。一、NSTimerNSTimer这种定时器用的比较多,但是特别需要注意释放问题,如果处理不好很容易引起循环引用问题,造成内存泄漏。1.1 NSTimer的创建NSTimer有两种创建方法。方法一:这种方法虽然创建了NSTimer,但是定时器却没有起作用。这种方式创建的NSTimer,需要加入到NSRunLoop中,有NSRunLoop的驱动才会让定时器跑起来。_ios nstimer

Linux常用命令_ls-lmore-程序员宅基地

文章浏览阅读4.8k次,点赞17次,收藏51次。Linux的命令有几百个,对程序员来说,常用的并不多,考虑各位是初学者,先学习本章节前15个命令就可以了,其它的命令以后用到的时候再学习。1、开机 物理机服务器,按下电源开关,就像windows开机一样。 在VMware中点击“开启此虚拟机”。2、登录 启动完成后,输入用户名和密码,一般情况下,不要用root用户..._ls-lmore

MySQL基础命令_mysql -u user-程序员宅基地

文章浏览阅读4.1k次。1.登录MYSQL系统命令打开DOS命令框shengfen,以管理员的身份运行命令1:mysql -u usernae -p password命令2:mysql -u username -p password -h 需要连接的mysql主机名(localhost本地主机名)或是mysql的ip地址(默认为:127.0.0.1)-P 端口号(默认:3306端口)使用其中任意一个就OK,输入命令后DOS命令框得到mysql>就说明已经进入了mysql系统2. 查看mysql当中的._mysql -u user

LVS+Keepalived使用总结_this is the redundant configuration for lvs + keep-程序员宅基地

文章浏览阅读484次。一、lvs简介和推荐阅读的资料二、lvs和keepalived的安装三、LVS VS/DR模式搭建四、LVS VS/TUN模式搭建五、LVS VS/NAT模式搭建六、keepalived多种real server健康检测实例七、lvs持久性工作原理和配置八、lvs数据监控九、lvs+keepalived故障排除一、LVS简介和推荐阅读的资料 学习LVS+Keepalived必须阅读的三个文档。1、 《Keepalived权威指南》下载见http://..._this is the redundant configuration for lvs + keepalived server itself

Android面试官,面试时总喜欢挖基础坑,整理了26道面试题牢固你基础!(3)-程序员宅基地

文章浏览阅读795次,点赞20次,收藏15次。AIDL是使用bind机制来工作。java原生参数Stringparcelablelist & map 元素 需要支持AIDL其实Android开发的知识点就那么多,面试问来问去还是那么点东西。所以面试没有其他的诀窍,只看你对这些知识点准备的充分程度。so,出去面试时先看看自己复习到了哪个阶段就好。下图是我进阶学习所积累的历年腾讯、头条、阿里、美团、字节跳动等公司2019-2021年的高频面试题,博主还把这些技术点整理成了视频和PDF(实际上比预期多花了不少精力),包含知识脉络 + 诸多细节。

机器学习-数学基础02补充_李孟_新浪博客-程序员宅基地

文章浏览阅读248次。承接:数据基础02