Código del Ejercicio
El código principal es el HTML5 que cargamos en el Visor HTML, y será el encargado de ejecutar todo el código javascript que muestra el gráfico y ejecuta el proceso de exportación.
El objetivo del ejercicio es poder renderizar el SVG en una imagen JPEG.
La librería canvg realiza este cometido perfectamente.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts - Exportación Offline</title>
<script src="jquery-2.1.4.min.js"></script>
<!-- Librerías para el renderizado de SVG en un canvas -->
<script src="rgbcolor.js"></script>
<script src="canvg.js"></script>
<!-- Librerías de HighCharts -->
<script src="highcharts.js"></script>
<script src="highcharts-3d.js"></script>
<script src="highcharts-more.js"></script>
<script src="exporting.js"></script>
<script>
$(function () {
/////// Opciones globales para todos los Gráficos
Highcharts.setOptions({
// Opciones del gráfico para la exportación
// Se tienen en cuenta en la función getSVGForExport
lang: {
contextButtonTitle: 'Exportar gráfico a Velneo'
},
chart: {
// Espacio para que quepa el botón de exportar
spacing: [10, 10, 10, 60],
borderWidth: 0
},
exporting: {
chartOptions: {
// chart: {backgroundColor: 'transparent'},
chart: {
backgroundColor: 'white',
spacing: [10, 10, 15, 10],
borderWidth: 0,
// Fijando valores ancho/alto determinamos la proporción del gráfico exportado
width: 600,
height: 400
},
plotOptions: {
series: {
dataLabels: {
enabled: false
}
}
}
},
// Hacemos que el Botón contextual ejecute directamente la Exportación
buttons: {
contextButton: {
menuItems: null,
onclick: function () {
exportar();
},
text: 'JPEG',
verticalAlign: 'bottom',
align: 'left',
height: 20,
x: -60,
y: 0,
symbol: 'triangle-down',
symbolStroke: 'DarkRed',
symbolFill: 'DarkSalmon',
symbolStrokeWidth: 2,
symbolSize: 14,
symbolX: 16,
symbolY: 14,
theme: {
'stroke-width': 1,
stroke: 'silver',
fill: 'WhiteSmoke',
r: 4,
states: {
hover: {
fill: 'Orange'
}
}
}
}
}
},
credits: {
enabled: false
}
});
/////// Configuración del Gráfico ///////
<!-- INSERT_VELNEO -->
$('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
title: {
text: 'Highcharts bubbles with radial gradient fill'
},
xAxis: {
gridLineWidth: 1
},
yAxis: {
startOnTick: false,
endOnTick: false
},
series: [{
data: [
[9, 81, 63],
[98, 5, 89],
[51, 50, 73],
[41, 22, 14],
[58, 24, 20],
[78, 37, 34],
[55, 56, 53],
[18, 45, 70],
[42, 44, 28],
[3, 52, 59],
[31, 18, 97],
[79, 91, 63],
[93, 23, 23],
[44, 83, 22]
],
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
]
}
}
}, {
data: [
[42, 38, 20],
[6, 18, 1],
[1, 93, 55],
[57, 2, 90],
[80, 76, 22],
[11, 74, 96],
[88, 56, 10],
[30, 47, 49],
[57, 62, 98],
[4, 16, 16],
[46, 10, 11],
[22, 87, 89],
[57, 91, 82],
[45, 15, 98]
],
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
]
}
}
}]
});
<!-- INSERT_VELNEO -->
});
function exportar() {
// Obtenemos el código SVG del gráfico
var chart = $('#container').highcharts()
// svg = chart.getSVG()
// Se le aplican al SVG las opciones de chart.exporting
svg = chart.getSVGForExport()
// Relación Ancho/Alto del gráfico establecido en las opciones de exportación
// De esta forma obtenemos un gráfico sin deformar
var chartWidth = chart.options.exporting.chartOptions.chart.width
var chartHeight = chart.options.exporting.chartOptions.chart.height
var nRelacion = chartHeight / chartWidth;
// Creamos un elemento Canvas o usamos uno ya existente
// var canvas = document.getElementById('canvas')
// canvas.style.display="none";
var canvas = document.createElement('canvas')
// Tamaño del canvas que determinará el tamaño del JPEG/PNG
// Necesitamos 8" x 150/300ppp = 1200/2400px para imprimir en papel
canvas.width = 1200;
canvas.height = canvas.width * nRelacion;
// Renderiza el svg en el canvas
// https://github.com/gabelerner/canvg
canvg(canvas, svg, {
ignoreDimensions: true,
scaleWidth: canvas.width,
scaleHeight: canvas.height
});
// Envía un evento Click a Velneo
var a = document.createElement('a');
// En Velneo 21 (con Chromium) es necesario el esquema para que funcione el click
a.href = "file:///" + canvas.toDataURL('image/jpeg',1);
a.click()
document.body.removechild(a)
}
</script>
</head>
<body>
<p style="margin:10px 0px 0px; font-family:arial,sans-serif; color:LightSlateGray"><b>Gráfico de HighCharts</b></p>
<hr >
<div id="container" height:400px; margin: 1em auto"></div>
</body>
</html>
Created with the Personal Edition of HelpNDoc: Generate Kindle eBooks with ease