javascript - example - highcharts demo
¿Cómo guardar una imagen del gráfico en el servidor con Highcharts? (4)
Simplemente implemento esto usando el método de Nobita. Estaba creando una encuesta que mostraba los resultados del usuario en un gráfico, subí la imagen a mi servidor y luego envié un correo electrónico con la imagen que contenía. Aquí hay algunas cosas para tener en cuenta.
Tuve que hacer algunas actualizaciones al archivo highcharts / exporting-server / index.php que son las siguientes:
Cambié el directorio de "temp" a algo más y solo tengo en cuenta que está en 4 ubicaciones diferentes.
Tuve que cambiar shell_exec () agregando "-XX: MaxHeapSize = 256m" porque me estaba dando un error:
$output = shell_exec("java -XX:MaxHeapSize=256m -jar ". BATIK_PATH ." $typeString -d $outfile $width /mypathhere/results/$tempName.svg");
Si desea que descargue esa imagen, puede dejar lo siguiente solo:
header("Content-Disposition: attachment; filename=$filename.$ext");
header("Content-Type: $type");
echo file_get_contents($outfile);
Pero cambié esto porque quería devolver el camino a la imagen, así que eliminé el anterior y lo reemplazo con la ruta de la imagen ( tenga en cuenta que solo estoy usando el nombre temporal ):
echo "/mypathhere/results/$tempName.$ext";
Además, este archivo está eliminando el archivo svg y también el nuevo archivo que ha creado. Debe eliminar el código que elimina el archivo:
unlink($outfile);
Y también puede eliminar la línea anterior si desea mantener el archivo svg.
Asegúrese de incluir highcharts / js / modules / exporting.js
Luego, en su JS puede hacer algo como lo siguiente:
var chart = new Highcharts.Chart();
var imageURL = '''';
var svg = chart.getSVG();
var dataString = ''type=image/jpeg&filename=results&width=500&svg=''+svg;
$.ajax({
type: ''POST'',
data: dataString,
url: ''/src/js/highcharts/exporting-server/'',
async: false,
success: function(data){
imageURL = data;
}
});
La URL que está publicando es la nueva versión del /exporting-server/index.php. Entonces, puedes usar el imageURL como quieras.
Con Highcharts, tiene un botón incorporado para descargar el gráfico actual (ejemplo: http://www.highcharts.com/demo/ , este botón: ) Puede guardarlo como PNG, JPEG, PDF o SVG.
Lo que me gustaría hacer es crear un enlace que guarde la imagen en el servidor, en lugar de descargarla . ¿Cómo podría hacer eso?
Supongo que tengo que modificar la función exportChart en el archivo exporting.src.js. Se ve así (pero no sé lo suficiente de JavaScript para hacer eso):
exportChart: function (options, chartOptions) {
var form,
chart = this,
svg = chart.getSVG(chartOptions);
// merge the options
options = merge(chart.options.exporting, options);
// create the form
form = createElement(''form'', {
method: ''post'',
action: options.url
}, {
display: NONE
}, doc.body);
// add the values
each([''filename'', ''type'', ''width'', ''svg''], function (name) {
createElement(''input'', {
type: HIDDEN,
name: name,
value: {
filename: options.filename || ''chart'',
type: options.type,
width: options.width,
svg: svg
}[name]
}, null, form);
});
// submit
form.submit();
// clean up
discardElement(form);
},
Se podría hacer realmente fácil con PhantomJS . Puede renderizar el gráfico de Highchart y guardarlo en SVG, PNG, JPEG o PDF. El siguiente ejemplo muestra un diagrama de demostración de Highcharts en SVG y PDF al mismo tiempo:
var system = require(''system'');
var page = require(''webpage'').create();
var fs = require(''fs'');
// load JS libraries
page.injectJs("js/jquery.min.js");
page.injectJs("js/highcharts/highcharts.js");
page.injectJs("js/highcharts/exporting.js");
// chart demo
var args = {
width: 600,
height: 500
};
var svg = page.evaluate(function(opt){
$(''body'').prepend(''<div id="container"></div>'');
var chart = new Highcharts.Chart({
chart: {
renderTo: ''container'',
width: opt.width,
height: opt.height
},
exporting: {
enabled: false
},
title: {
text: ''Combination chart''
},
xAxis: {
categories: [''Apples'', ''Oranges'', ''Pears'', ''Bananas'', ''Plums'']
},
yAxis: {
title: {
text: ''Y-values''
}
},
labels: {
items: [{
html: ''Total fruit consumption'',
style: {
left: ''40px'',
top: ''8px'',
color: ''black''
}
}]
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
},
series: {
enableMouseTracking: false,
shadow: false,
animation: false
}
},
series: [{
type: ''column'',
name: ''Andrii'',
data: [3, 2, 1, 3, 4]
}, {
type: ''column'',
name: ''Fabian'',
data: [2, 3, 5, 7, 6]
}, {
type: ''column'',
name: ''Joan'',
data: [4, 3, 3, 9, 0]
}, {
type: ''spline'',
name: ''Average'',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: ''white''
}
}, {
type: ''pie'',
name: ''Total consumption'',
data: [{
name: ''Andrii'',
y: 13,
color: ''#4572A7''
}, {
name: ''Fabian'',
y: 23,
color: ''#AA4643''
}, {
name: ''Joan'',
y: 19,
color: ''#89A54E''
}],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
return chart.getSVG();
}, args);
// Saving SVG to a file
fs.write("demo.svg", svg);
// Saving diagram as PDF
page.render(''demo.pdf'');
phantom.exit();
Si guarda el código como demo.js , simplemente ejecute bin/phantomjs demo.js para generar demo.svg y demo.pdf
Puedes intentar esto
var chart = $(''#yourchart'').highcharts();
svg = chart.getSVG();
var base_image = new Image();
svg = "data:image/svg+xml,"+svg;
base_image.src = svg;
$(''#mock'').attr(''src'', svg);
Tome html de Mock y envíe a DB o guarde solo el código binario.
No he hecho eso antes, pero creo que quieres jugar con el archivo index.php ubicado en la carpeta exporting-server . De forma predeterminada, Highcharts proporciona (de forma gratuita) un servicio web, pero puede modificarlo y crear su propio servicio web para exportar, o hacer lo que quiera con el gráfico. Mira estas instrucciones que se pueden encontrar aquí Módulo de exportación :
"Si desea configurar este servicio web en su propio servidor, el archivo index.php que maneja el POST se incluye en el paquete de descarga dentro del directorio / exporting-server.
- Asegúrese de que PHP y Java estén instalados en su servidor.
- Suba el archivo index.php del directorio / exporting-server en el paquete de descarga a su servidor.
- En su programa FTP, cree un directorio llamado temp en el mismo directorio que index.php y chmod este nuevo directorio en 777 (solo servidores Linux / Unix).
- Descarga Batik desde http://xmlgraphics.apache.org/batik/#download . Encuentre la distribución binaria para su versión de jre
- Suba batik-rasterizer.jar y todo el directorio lib a una ubicación en su servidor web. En las opciones en la parte superior del archivo index.php, establezca la ruta a batik-rasterier.jar.
- En las opciones de gráfico, establezca la opción exporting.url para que coincida con la ubicación de su archivo PHP. "