html2canvas图表没有,将html2Canvas与HighCharts一起使用

Highcharts使用svg绘制图表.您将需要使用canvg库将此svg绘制到临时画布,然后在使用html2canvas截取屏幕截图后删除该画布.

试试这个：

//find all svg elements in $container

//$container is the jQuery object of the div that you need to convert to image. This div may contain highcharts along with other child divs, etc

var svgElements= $container.find('svg');

//replace all svgs with a temp canvas

svgElements.each(function () {

var canvas, xml;

canvas = document.createElement("canvas");

canvas.className = "screenShotTempCanvas";

//convert SVG into a XML string

xml = (new XMLSerializer()).serializeToString(this);

// Removing the name space as IE throws an error

xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');

//draw the SVG onto a canvas

canvg(canvas, xml);

$(canvas).insertAfter(this);

//hide the SVG element

this.className = "tempHide";

$(this).hide();

});

//...

//HERE GOES YOUR CODE FOR HTML2CANVAS SCREENSHOT

//...

//After your image is generated revert the temporary changes

$container.find('.screenShotTempCanvas').remove();

$container.find('.tempHide').show().removeClass('tempHide');