如何在highcharts中调整自定义按钮的宽度和高度
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在highcharts中调整自定义按钮的宽度和高度相关的知识,希望对你有一定的参考价值。
我尝试在highcharts中调整自定义按钮的宽度和高度,但是我找不到任何关于此的演示或教程。
http://jsfiddle.net/Murali_Kaliappan/2F4pJ/1029/是我的小提琴
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
exporting: {
buttons: {
customButton: {
x: -62,
onclick: function () {
alert('Clicked');
},
symbol: 'url(https://png.icons8.com/metro/1600/expand.png)',
height:18,
width:18
}
}
}
});
});
答案
customButton.symbol
应该与SVG对象一起使用 - 这就是height
和width
等配置选项不起作用的原因。
您可以使用Highcharts defs
为按钮定义图像背景:
JS:
defs: {
custombtnbg: {
tagName: 'pattern',
id: 'custom-btn-bg',
x: 0,
y: 0,
width: 24,
height: 24,
children: [{
tagName: 'image',
width: 24,
height: 24,
href: 'https://png.icons8.com/metro/1600/expand.png'
}]
}
},
(...)
exporting: {
buttons: {
customButton: {
x: -62,
id: 'btn',
onclick: function() {
alert('Clicked');
},
text: '',
className: 'custom-btn',
theme: {
'stroke-width': 0
}
}
}
}
CSS:
@import 'https://code.highcharts.com/css/highcharts.css';
.custom-btn {
fill: url(#custom-btn-bg);
}
现场演示:http://jsfiddle.net/BlackLabel/u4Lx71by/
关于defs的文章:https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns
以上是关于如何在highcharts中调整自定义按钮的宽度和高度的主要内容,如果未能解决你的问题,请参考以下文章
如何在自定义 tableView Cell 中调整标签高度和宽度
调整 UILabel 的大小以适应自定义 UITableViewCell 中的文本,无论宽度如何