1 实现代码
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../jquery-3.2.1.js"></script>
<script src="../highcharts/highcharts.js"></script>
<script src="../highcharts/exporting.js"></script>
<title>Document</title>
</head>
<body>
<button type="button" class="button">导出</button>
<div >
<div id="chart" style="width:800px;height:350px;"></div>
</div>
</body>
</html>
<script>
var chart = Highcharts.chart('chart', {
title: {
text: ''
},
credits: { // 隐藏版权
enabled: false
},
exporting:{
enabled: false
},
xAxis: [{
tickWidth: 0,
lineColor: 'rgba(94, 168, 242, 0.1)',
crosshair: {
color: 'white',
width: 1,
dashStyle: 'Dash',
snap: true
},
title: {
text: '(月份)',
align: 'high',
x: 10,
y: -20,
},
categories: ['1', '2', '3', '4', '5', '6'],
}],
yAxis: [{
tickWidth: 0,
gridLineColor: 'rgba(94, 168, 242, 0.1)',
gridLineWidth: 1,
title: {
text: null
},
min: 0
}],
series: [{
name: '公司一',
color: '#1492ff',
data: [88, 81, 112, 89, 118, 62]
}, {
name: '公司二',
color: '#c42929',
data: [59, 61, 100, 95, 138, 81]
}, {
name: '公司三',
color: '#2ac43b',
data: [129, 59, 89, 118, 182, 181]
}],
});
$('.button').click(function () {
chart.exportChart({
filename: '警情统计'
}, {
chart: {
backgroundColor: '#FFFFFF'
}
});
});
</script>
2 最终效果图
![](https://img-blog.csdnimg.cn/2020101821491242.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70)