highcharts 柱状图 数值太小不显示问题

 

在配置中加入这行代码

	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
				]
			]
		}]
	}
});

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

芝麻开门2015

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值