Hola que tal???
Espero estén bien!
Tengo un problema al exporta una grafica de Highcharts.
Realice miles de pruebas, y hasta ayer me exportaba. Pero el día de hoy no me exporta (sin realizar ninguna modficicación) y me aparece el siguiente error:
Cita: About to transcode 1 SVG file(s)
Converting 74001a014d33bf6a3d4d5c5646955f4e.svg to temp/74001a014d33bf6a3d4d5c5646955f4e.pdf ... ... error (SVGConverter.error.while.rasterizing.file)
Error while converting SVG
Despues d e tanto leer en la documentación, el problemas es que "no esta bien formada" y la cuetión es que es tal cual. Intente utilizando un simple código de exportación javascript
:
Código:
// button handler
$('#button').click(function() {
chart.exportChart();
});
En el HTML:
Código HTML:
<button id="button">Export chart</button>
Pero no exporta a JPEG ni a PNG ni a PDF, sólo a SVC (pero me dá el error de que está mal formada cuando abre la imagen).
El codigo completo del javascript es el siguiente:
Código HTML:
Highcharts.visualize = function(table, options) {
// the categories
options.xAxis.categories = [];
$('tbody th', table).each( function(i) {
options.xAxis.categories.push(this.innerHTML);
});
// the data series
options.series = [];
$('tr', table).each( function(i) {
var tr = this;
$('th, td', tr).each( function(j) {
if (j > 0) { // skip first column
if (i == 0) { // get the name and init the series
options.series[j - 1] = {
name: this.innerHTML,
data: [],
type: 'area',
dataLabels: {
enabled: true,
color: '#000000',
formatter: function() {
return this.y;
}
}
};
} else { // add values
options.series[j - 1].data.push(parseFloat(this.innerHTML));
}
}
});
});
var chart = new Highcharts.Chart(options);
}
$(document).ready(function() {
var table = document.getElementById('datatable'),
options ={
chart: {
renderTo: 'container',
defaultSeriesType: 'area',
spacingBottom: 30
},
title: {
text: 'Gráficos Estadísticos - SPO2'
},
xAxis: {
title: {
text: 'Período de Tiempo - Meses'
}
},
yAxis: {
title: {
text: 'Horas - Hombre'
},
labels: {
formatter: function() {
return this.value;
}
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.y +'H/H';
}
},
plotOptions: {
area: {
fillOpacity: 0.5
}
},
exporting: {
enabled: true,
filename: 'Grafica - SPO2'
}
};
Highcharts.visualize(table, options);
});
// button handler
$('#button').click(function() {
chart.exportChart();
});
Y en el HTML:
Código HTML:
<head>
<!-- Para Definicion de Estilo de los Graficos -->
<script type="text/javascript" src="../../javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../../javascript/highcharts.js"></script>
<!-- Para exportar archivo -->
<script type="text/javascript" src="../../javascript/modules/exporting.js"></script>
<!-- Para Acción sobre los Graficos -->
<script type="text/javascript" src="../../javascript/grafico.js"></script>
</head>
<body>
<div id="container" style="width: 800px; height: 320px; margin:0 auto"></div>
<table border="0" id="datatable" title="grafica" cellpadding="5" cellspacing="5" summary="Presentacion del grafico estadiastico">
<thead>
<tr>
<th></th>
<th> Proyecto</th>
<th>Actividad</th>
</tr>
</thead>
<tbody >
<tr>
<th>Mes</th>
<td>4</td>
<td>6</td>
</tr>
<tr>
<th>Mes</th>
<td>7</td>
<td>12</td>
</tr>
<tr>
<th>Mes</th>
<td>89</td>
<td>34</td>
</tr>
</tbody>
</table>
<button id="button">Export chart</button>
</body> Pero no se ejecuta.
Espero su ayuda!