使用javascript将highcharts图表导出为图像的3种方法(客户端解决方案)

本文概述

highchartsSVGtoImage
highchartsCustomSVGtoImage
nativeSVGtoImage

将highcharts图表导出到本地图像时, 很多问题会在运行时出现。分辨率差, 生成的图像仅占图表的一小部分, 自定义图表未按预期导出..等等。
在你的文档中包含以下代码(另存为文件或将其包含在脚本标签中), 然后选择最适合你需要的方法。
注意：给定的代码假定你已经链接到文档jQuery(可选, 可以使用纯JavaScript选择器更改选择器)和Highcharts_export.js(给定方法中的2个必需), 可以在此处下载。该代码旨在帮助你生成具有Highchart或本地svg到图像的图像, 这意味着你可以根据需要修改或共享代码。

/*** Highcharts exportation functions* @author Our Code World*/ (function(window){function ExportInitializator(){var exp = {}; var EXPORT_WIDTH = 1000; // Exportation width/*** This method requires the highcharts_export.js file */exp.highchartsSVGtoImage = function(chart, callback) {var svg = chart.highcharts().getSVG(); var canvas = document.createElement('canvas'); canvas.width = chart.width(); canvas.height = chart.height(); var ctx = canvas.getContext('2d'); var img = document.createElement('img'); img.onload = function() {ctx.drawImage(img, 0, 0); callback(canvas.toDataURL('image/png')); }; img.setAttribute('src', 'data:image/svg+xml; base64, ' + btoa(unescape(encodeURIComponent(svg)))); }; /*** This method requires the highcharts_export.js file */exp.highchartsCustomSVGtoImage = function(chart, callback){if(!chart){console.error("No chart given "); }var render_width = EXPORT_WIDTH; var render_height = render_width * chart.chartHeight / chart.chartWidth; var svg = chart.getSVG({exporting: {sourceWidth: chart.chartWidth, sourceHeight: chart.chartHeight}}); var canvas = document.createElement('canvas'); canvas.height = render_height; canvas.width = render_width; var image = new Image(); image.src = 'data:image/svg+xml; base64, ' + btoa(unescape(encodeURIComponent(svg))); console.log(image); image.addEventListener('load', function() {console.log(chart); canvas.getContext('2d').drawImage(this, 0, 0, render_width, render_height); callback(canvas.toDataURL('image/png')); }, false); image.src = 'data:image/svg+xml; base64, ' + window.btoa(svg); }; /*** This method requires the highcharts_export.js file */exp.nativeSVGtoImage = function(DOMObject, callback, format){if(!DOMObject.nodeName){throw new error("Se requiere un objeto DOM de tipo SVG. Obtener con document.getElementById o un selector de jQuery $(contenedor).find('svg')[0]"); }var svgData = http://www.srcmini.com/new XMLSerializer().serializeToString(DOMObject); var canvas = document.createElement("canvas"); canvas.width = $(DOMObject).width(); canvas.height = $(DOMObject).height(); var ctx = canvas.getContext( "2d" ); var img = document.createElement("img"); img.setAttribute( "src", "data:image/svg+xml; base64, " + btoa(unescape(encodeURIComponent(svgData))) ); img.onload = function() {ctx.drawImage( img, 0, 0 ); if(format === "jpeg" || format === "jpg"){callback(canvas.toDataURL("image/jpeg")); }else{callback(canvas.toDataURL("image/png")); }}; return true; }; return exp; }if(typeof(highchartsExport) === 'undefined'){window.highchartsExport = new ExportInitializator(); }})(window);

highchartsSVGtoImage此方法需要一个highcharts(或包含highchart的变量)的jQuery选择器, 并从中调用方法getSVG。创建一个图像, 其源将是先前的svg结果, 然后创建一个画布并在其上绘制先前的图像, 我们可以从该画布生成base64图像。 (此图片的尺寸与svg容器相同)
注意：此函数不是同步的, 因此, 第二个参数期望是一个函数(将第一个参数作为base64 uri接收)。
用法

highchartsExport.highchartsSVGtoImage($("#myChartContainer"), function(uri){window.open(uri); });

highchartsCustomSVGtoImage此方法需要一个highcharts的jQuery选择器来调用该函数, 然后从中调用方法getSVG。创建一个图像并将其源作为前一个svg结果, 然后创建一个画布并在其上绘制前一个图像, 我们可以从该画布生成base64图像。(该图像的宽度将是在脚本顶部声明的自定义属性” EXPORT_WIDTH” , 将执行以下操作：render_width * chart.chartHeight / chart.chartWidth)
注意：此函数不是同步的, 因此, 第二个参数期望是一个函数(将第一个参数作为base64 uri接收)。
用法

highchartsExport.highchartsCustomSVGtoImage($("#myChartContainer").highcharts(), function(uri){window.open(uri); });

nativeSVGtoImage【使用javascript将highcharts图表导出为图像的3种方法(客户端解决方案)】此方法需要本地SVG dom对象。创建一个图像, 其源将是先前的svg结果(由XMLSerializer解释), 然后创建一个画布, 并在其上绘制先前的图像, 我们可以从该画布生成base64图像。
注意：此函数不是同步的, 因此, 第二个参数期望是一个函数(将第一个参数作为base64 uri接收)。
用法