Highcharts的一些操作
Highcharts的一些操作
去掉打印按钮
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 '+ this.point.color + '"> '+this.point.name+':'
+ this.y + '个,占比' + Highcharts.numberFormat(this.percentage, 1) + '%';
}
}
}
},