![](/img/trans.png)
[英]Why Highcharts not render ploted images when exporting locally offline chart?
[英]Try to offline exporting to Highcharts
我想用 highcharts 進行離線導出。這是我的代碼
import {Chart} from 'highcharts-vue'
import Highcharts from 'highcharts'
import offlineExporting from "highcharts/modules/offline-exporting"
offlineExporting(Highcharts)
我嘗試將 exporting.js 和 offline-exporting.js 一起使用並且它起作用了。 這是問題的解決方案嗎? 如果不是,還有其他解決方案嗎?
您需要將“ exporting.fallbackToExportServer
”設置為“ false
”,以便始終在本地導出您的圖表。
http://jsfiddle.net/viethien/rcmpbsL1/
/* Automate testing of module somewhat */ var nav = Highcharts.win.navigator, isMSBrowser = /Edge\\/|Trident\\/|MSIE /.test(nav.userAgent), isEdgeBrowser = /Edge\\/\\d+/.test(nav.userAgent), containerEl = document.getElementById('container'), parentEl = containerEl.parentNode, oldDownloadURL = Highcharts.downloadURL; function addText(text) { var heading = document.createElement('h2'); heading.innerHTML = text; parentEl.appendChild(heading); } function addURLView(title, url) { var iframe = document.createElement('iframe'); if (isMSBrowser && Highcharts.isObject(url)) { addText(title + ': Microsoft browsers do not support Blob iframe.src, test manually' ); return; } iframe.src = url; iframe.width = 400; iframe.height = 300; iframe.title = title; iframe.style.display = 'inline-block'; parentEl.appendChild(iframe); } function fallbackHandler(options) { if (options.type !== 'image/svg+xml' && isEdgeBrowser || options.type === 'application/pdf' && isMSBrowser) { addText(options.type + ' fell back on purpose'); } else { throw 'Should not have to fall back for this combination. ' + options.type; } } Highcharts.downloadURL = function (dataURL, filename) { // Emulate toBlob behavior for long URLs if (dataURL.length > 2000000) { dataURL = Highcharts.dataURLtoBlob(dataURL); if (!dataURL) { throw 'Data URL length limit reached'; } } // Show result in an iframe instead of downloading addURLView(filename, dataURL); }; Highcharts.Chart.prototype.exportTest = function (type) { this.exportChartLocal({ type: type }, { title: { text: type }, subtitle: { text: false } }); }; Highcharts.Chart.prototype.callbacks.push(function (chart) { if (!chart.options.chart.forExport) { var menu = chart.exportSVGElements && chart.exportSVGElements[0], oldHandler; chart.exportTest('image/png'); chart.exportTest('image/jpeg'); chart.exportTest('image/svg+xml'); chart.exportTest('application/pdf'); // Allow manual testing by resetting downloadURL handler when trying // to export manually if (menu) { oldHandler = menu.element.onclick; menu.element.onclick = function () { Highcharts.downloadURL = oldDownloadURL; oldHandler.call(this); }; } } }); /* End of automation code */ Highcharts.chart('container', { exporting: { chartOptions: { // specific options for the exported image plotOptions: { series: { dataLabels: { enabled: true } } } }, sourceWidth: 400, sourceHeight: 300, scale: 1, fallbackToExportServer: false, error: fallbackHandler }, title: { text: 'Offline export' }, subtitle: { text: 'Click the button to download as PNG, JPEG, SVG or PDF' }, chart: { type: 'area' }, 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, 126.0, 148.5, 216.4, 194.1, 95.6, 54.4] }] });
#container { max-width: 800px; height: 400px; margin: 1em auto; }
<script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/offline-exporting.js"></script> <div id="container"></div>
要使用offline-exporting
模塊,您還需要導入exporting
模塊。
此外,您可以禁用fallbackToExportServer
屬性,以便導出永遠不會使用 Highcharts 導出服務器。
exporting: {
...,
fallbackToExportServer: false
},
應用程序接口:
fallbackToExportServer:布爾值
如果離線導出模塊無法在客戶端導出圖表,是否回退到導出服務器。
...
現場演示: https : //jsfiddle.net/BlackLabel/92dbwLgx/
API 參考: https : //api.highcharts.com/highcharts/exporting.fallbackToExportServer
文檔: https : //www.highcharts.com/docs/export-module/client-side-export
對於offline-exporting
,您必須進行客戶端導出實施
import { withHighcharts } from 'react-jsx-highcharts';
import Highcharts from 'highcharts';
import exportingOption from 'highcharts/modules/exporting';
import offlineOption from 'highcharts/modules/offline-exporting';
exportingOption(Highcharts);
offlineOption(Highcharts);
withHighcharts(Component, Highcharts);
此外,您必須添加將 object 導出為 Highcharts 選項
exporting: {
buttons: {
contextButton: {
menuItems: ['downloadPNG', 'downloadJPEG', 'downloadPDF', 'downloadSVG']
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.