I need get chart with images in bars (i using pattern and script Highstocks) and put in a tag Canvas, but when i send SVG to tag Canvas the images in bar disappear. Do you can help me? Follow bellow that i did until here:
http://jsfiddle.net/Posture/7aLzdej4/
<!DOCTYPE html>
<html>
<head>
<title>Pattern Fill in Canvas</title>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- Highcharts -->
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<!-- Canvg -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.4/rgbcolor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stackblur-canvas/1.4.1/stackblur.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>
</head>
<body>
<br>
<div style="background-color: #ffffff;">
<div id="graf-teste" style="min-width: 80%; height: 200px; max-width: 100%; margin: 0 auto"></div>
<button id='btn_capt'>Capturar Gráfico</button>
</div>
<script type="text/javascript">
var redrawEnabled = true,
ctr = 0;
ctr1 = 1;
Highcharts.chart('graf-teste', {
// $('#graf-teste').highcharts({
chart: {
events: {
render: function() {
if (redrawEnabled) {
redrawEnabled = false;
var chart = this,
renderer = chart.renderer;
chart.series[0].points.forEach(function(p) {
console.log(p);
var widthRatio = p.shapeArgs.width / p.shapeArgs.height,
id = 'pattern-' + p.index + '-' + ctr;
var pattern = renderer.createElement('pattern').add(renderer.defs).attr({
width: 1,
height: widthRatio,
id: id,
patternContentUnits: 'objectBoundingBox'
});
renderer.image('https://i.pinimg.com/originals/6c/38/66/6c38667a1977cbcac6f94b92decd7927.png', 0, 0, 1, widthRatio).attr({
}).add(pattern);
p.update({
color: 'url(#' + id + ')'
}, false);
});
chart.series[1].points.forEach(function(q) {
console.log(q);
var widthRatio = q.shapeArgs.width / q.shapeArgs.height,
id = 'pattern-' + q.index + '-' + ctr1;
var pattern = renderer.createElement('pattern').add(renderer.defs).attr({
width: 1,
height: widthRatio,
id: id,
patternContentUnits: 'objectBoundingBox'
});
renderer.image('https://s2.glbimg.com/GFHUa5KeFPDTmwtAVjWl1A7oqTQ=/695x0/s.glbimg.com/po/tt2/f/original/2014/07/14/imagem0.jpg', 0, 0, 1, widthRatio).attr({
}).add(pattern);
q.update({
color: 'url(#' + id + ')'
}, false);
});
ctr++;
ctr1++;
chart.redraw();
redrawEnabled = true;
}
}
}
},
title: {
text: 'Gráfico Teste'
},
exporting: {
enabled: false
},
xAxis: {
categories: ['']
},
yAxis: {
min: 0,
title: {
text: ''
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'percent',
dataLabels: {
enabled: true,
format: '<b>{point.percentage:.0f}%</b>',
//point.percentage:.1f
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
type: 'bar',
name: 'Serie 1',
enableMouseTracking: false,
// borderWidth: 1,
// borderColor: '#000000',
data: [250]
}, {
type: 'bar',
name: 'Serie 2',
enableMouseTracking: false,
// borderWidth: 1,
// borderColor: '#000000',
data: [100]
}],
credits: {
enabled: false
}
});
</script>
<canvas id="graf"></canvas>
<script type="text/javascript">
$("#btn_capt").on('click',function(e){
var svg = $('#graf-teste').highcharts().getSVG();
canvg(document.getElementById('graf'),svg);
var img = graf.toDataURL("image/png"); //img is data:image/png;base64
img = img.replace('data:image/png;base64,', '');
});
</script>
</body>
</html>
Comments: It's totally necessary use highstock, because of others charts in page.
Take a look at this demo: http://jsfiddle.net/BlackLabel/u20c8vhL/
I created a new div for the chart and render the SVG there by this method: