Highcharts的一些操作

最新推荐文章于 2025-08-25 17:48:27 发布

原创最新推荐文章于 2025-08-25 17:48:27 发布 · 525 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用Highcharts进行图表定制，包括去除打印按钮、隐藏图例、设置导出选项、柱状图数值显示及3D饼图的百分比配置等实用技巧。

Highcharts的一些操作

去掉打印按钮
去掉右下角的网址信息
隐藏图例
导出数据设置
柱状图默认显示数字
3D饼图，显示对应的值和百分比

去掉打印按钮

Highcharts官网实例eg:https://jshare.com.cn/demos/NPVyQW

exporting:{ 
		enabled:true //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示 
},

去掉右下角的网址信息

Highcharts官网实例eg:https://jshare.com.cn/demos/NPVyQW

credits: {
		enabled:false   //去掉网址信息
	},

隐藏图例

Highcharts官网实例eg:https://jshare.com.cn/demos/NPVyQW
即:点击柱状图下边的蓝色小圆和文字会将数据隐藏
在这里插入图片描述
隐藏代码：

legend: {
		//隐藏图例
		enabled: false                                                          
	},

导出数据设置

设置一个js即可

"http://cdn.hcharts.cn/libs/highcharts-export-csv/export-csv.js"   //2018年版本成功
或者
http://cdn.hcharts.cn/highcharts/modules/export-data.js    -- 这个在官网可以成功(2019年版本)

柱状图默认显示数字

plotOptions: {
     column:{
         dataLabels:{
             enabled:true, // dataLabels设为true
             style:{
                 color:'#000'
             }
         }
     }
},

3D饼图，显示对应的值和百分比

效果图：
在这里插入图片描述

plotOptions: {
		pie: {
			allowPointSelect: true,
			cursor: 'pointer',
			depth: 35,
			dataLabels: {
				enabled: true,
				//format: '{point.name}'
				formatter: function() {
					//this 为当前的点（扇区）对象，可以通过 console.log(this) 来查看详细信息
					return '<span style="color: ' + this.point.color + '"> '+this.point.name+'：' 
						+ this.y + '个，占比' + Highcharts.numberFormat(this.percentage, 1) + '%</span>';
				}
			}
		}
	},