Highcharts 實現自定義匯出圖片
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 最終效果圖
相關文章
- Highcharts使用phantomjs匯出圖片JS
- 自定義Drawable:實現文字生成圖片
- 自定義drawable實現圓角圖片
- 自定義view實現圓角圖片View
- 如何實現OSM地圖本地釋出並自定義配圖地圖
- 自定義View:畫布實現自定義View(折線圖的實現)View
- Vue富文字帶圖片修改圖片大小自定義選擇項自定義字型Vue自定義字型
- 6.自定義圖片剪下
- Android自定義View之圖片外形特效——輕鬆實現圓角和圓形圖片AndroidView特效
- 自定義上傳圖片拼圖遊戲遊戲
- 安卓自定義View實現圖片上傳進度顯示(仿QQ)安卓View
- android 自定義ScrollView實現背景圖片伸縮的實現程式碼及思路AndroidView
- WebView自定義長按圖片功能WebView
- Typora中自定義命令上傳圖片
- Flutter 自定義列表以及本地圖片引用Flutter地圖
- GKPhotoBrowser--自定義圖片瀏覽器瀏覽器
- 自定義圖片輪播控制元件控制元件
- 安卓自定義View進階: 圖片文字安卓View
- IOS 自定義 UIDatePicker 背景圖片iOSUI
- 自定義View:自定義屬性(自定義按鈕實現)View
- 自定義RecyclerView動畫——實現remove飛出效果View動畫REM
- Laravel maatwebsite/excel 3.1 匯出圖片LaravelWebExcel
- 【freemaker實現匯出word③】詳解將echarts的圖片到出到wordEcharts
- SpringBoot圖文教程10—Excel模板匯出|百萬資料匯出|圖片匯出「easypoi」Spring BootExcel
- Laravel-admin 自定義匯出表單Laravel
- html2canvas將指定區域匯出為圖片(js將div匯出為圖片)HTMLCanvasJS
- IM即時通訊專案講解(二) 自定義實現圖片選擇GalleryViewView
- UEditor 自定義圖片視訊尺寸校驗
- iOS實現自定義的彈出檢視(popView)iOSView
- 【SQL】Oracle BLOB 批量匯入匯出圖片語句SQLOracle
- javascript實現網頁截圖匯出方案JavaScript網頁
- PhpSpreadsheet 匯出圖片到 ExcelPHPExcel
- PPT圖片高畫質匯出方法
- java匯出圖片,拼接多個圖片, 拼接文字和圖片 到一個圖片檔案Java
- 高德地圖自定義Marker點選時出現的InfoWindow地圖
- Net 實現自定義Aop
- EventSource的自定義實現
- 微信分享自定義實現