使用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 = 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

此方法需要本地SVG dom对象。创建一个图像, 其源将是先前的svg结果(由XMLSerializer解释), 然后创建一个画布, 并在其上绘制先前的图像, 我们可以从该画布生成base64图像。

注意：此函数不是同步的, 因此, 第二个参数期望是一个函数(将第一个参数作为base64 uri接收)。

用法

highchartsExport.nativeSVGtoImage($("#myChartContainer").find("svg")[0], function(uri){
   window.open(uri);
}, 'png');

你是否有更多方法可以在本地导出高价图表？在此处的评论框中与我们分享。