我在highcharts的导出选项中添加了一个自定义图像，但是在这里我需要调整图像的大小或增加其宽度并使其成为光标指针。但是我没有在这里找到如何制作它的方法，我使用了CSS但它不起作用，这是演示http://plnkr.co/edit/YSLQMoQpKZqFPk0PXhXm?p=preview
的小插曲<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
</head>
<body>
<div id="container"></div>
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
},
exporting: {
buttons: {
'myButton': {
symbol: 'url(https://www.highcharts.com/demo/gfx/sun.png)',
onclick: function () {
alert('You pressed the button!');
},
theme: {
class: "myButton highcharts-button highcharts-button-normal",
id: "myDiamondButton",
}
}
}
}
});
答案 0 :(得分：0)
添加自定义图像的更好解决方案是使用Highcharts.SVGRenderer而不是导出按钮对象。这种方法允许您调整图像大小，添加光标指针，自定义事件等等。查看下面发布的演示。
chart: {
events: {
load: function() {
var chart = this,
btn;
btn = chart.renderer
.image('https://www.highcharts.com/demo/gfx/sun.png', 80, 0, 50, 50)
.css({
cursor: 'pointer'
})
.add()
.toFront()
.on('click', function() {
alert('You pressed the button!');
});
}
}
}
演示：
https://jsfiddle.net/BlackLabel/v9gw32kp/1/
Api参考：
https://api.highcharts.com/class-reference/Highcharts.SVGElement#on
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#image