Leinwand Bild verschwommen

Question

https://jsfiddle.net/Abhi_Solanki/9yktct3z/3/ hier Geige Link bekommt ..

, was ich versuche zu tun, um die gleiche Leistung zeigen, wie die highcharts zeigen, wenn es im PDF-Format oder SVG-Format exportiert wird, infact in diesem Code habe ich verwendet die gleiche Funktion, die verwendet wird, um SVG-Datei von Highcharts zu generieren die Ausgabe von mir scheint mir

aber das Problem entsteht, wenn ich diese Variable in canvg.js Datei übergeben canvg bei Funktion übergeben, die Zeit die Ausgabe des Bildes wird verschwommen

wo ich möchte, dass die Ausgabe gleich bleibt, wie es ist, ohne dass Pixel unscharf werden, wie es in der highcharts pdf ist. wie ich dieses Bild des Diagramms in einer pdf-Akte anzeigen muss, also helfen Sie bitte. Code ist wie folgt.

---

var svgres = chart.getSVG(); 
 
var svgArr = [], 
 
\t \t \t top = 0, 
 
\t \t \t height = 0, 
 
\t \t \t width = 0, 
 
\t \t \t col=0; 
 
\t \t \t svgCustDim = 400; 
 
\t \t \t var svgWidth = 600, 
 
\t \t \t svg = svgres.replace('<svg', '<g transform="translate(' + col * svgWidth + ',' + top + ')" '); 
 
\t \t \t svg = svg.replace('</svg>', '</g>'); 
 
\t \t \t svg = '<svg height="' + svgCustDim + '" width="' + svgCustDim*(3)+ '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svg + '</svg>'; 
 
canvg('canvas', svg); 
 
var canvas = document.getElementById('canvas');  
 
return canvas.toDataURL("image/jpeg");

Answer 1

Die Version von canvg in der Demo-Seite auf Github verwendet wird, ist fehlerhaft. Wenn ich das Skript von hier https://github.com/canvg/canvg/blob/master/canvg.js nehme und es in die Fidel einfügen, funktioniert es gut.

Sie können mehr darüber hier https://github.com/canvg/canvg/issues/486 lesen.

Auch Ihre Leinwand ist viel größer als das Bild, Sie können die Breite und Höhe des Diagramms nehmen, so dass die Leinwand die gleiche Dimension wie das Diagramm hat.

svgCustDim = chart.chartHeight; 
var svgWidth = chart.chartWidth, 
svg = svgres.replace('<svg', '<g'); 
svg = svg.replace('</svg>', '</g>'); 
svg = '<svg height="' + svgCustDim + '" width="' + svgWidth+ '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svg + '</svg>'; 

Hier ist eine Geige mit dem aus der URL genommen canvg.js oben und die Veränderungen, so dass Ihre Leinwand die gleiche Dimension wie das Diagramm, dass es, dass die verkleinerte Version (canvg erscheint https://jsfiddle.net/9yktct3z/6/

Hinweis ist .min.js) ist

, wenn Sie die Höhe und Breite eine größere Auflösung Bild entfernen möchten, von Ihnen Container Diagramm

<div id="container" style="margin: 0 auto"></div> 

und se t sie in der Tabelle Option, habe ich 2000 * 2000, aber sie spielen, um mit den Werten

chart: { 
    height: 2000, 
    width: 2000, 
    plotBackgroundColor: null, 
    plotBorderWidth: null, 
    plotShadow: false, 
    type: 'pie' 
}, 

hier ist die volle Geige https://jsfiddle.net/9yktct3z/10/