这个不是你提的吗,当时不是说这个按钮是重置缩放, https://ask.csdn.net/questions/1095592
用下面例子看下,有没有问题
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function () {
var zoomImg;
Highcharts.Chart.prototype.showResetZoom = function () {
var chart = this;
if (!zoomImg) {
zoomImg = chart.renderer.image("https://icons.iconarchive.com/icons/ampeross/qetto-2/32/search-icon.png", chart.chartWidth - 100, 10, 32, 32) //src, x, y, width, height
.on('click', function () {
chart.zoomOut();
$(this).remove();
zoomImg = null;
})
.attr({
zIndex: 100
})
.add()
}
}
$('#container').highcharts({
chart: {
zoomType: 'x',
selectionMarkerFill: 'rgba(0,0,0, 0.2)',
resetZoomButton: {
// 按钮定位
position: {
align: 'right', // by default
verticalAlign: 'top', // by default
x: 0,
y: -30
},
text: 'aaaa',
// 按钮样式
theme: {
fill: 'white',
text: "<img src='https://www.gravatar.com/avatar/35d73b489c80b662f62baccd4f8c4da4?s=32&d=identicon&r=PG&f=1' style='height:50px;width:50px'></img>",
style: {
color: 'red'
},
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#41739D',
style: {
color: 'green'
}
},
}
}
}
},
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]
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0px auto;margin-left:200px;"></div>
</body>
</html>