Highcharts: Actualización dinámica del nombre de archivo de exportación
Estoy utilizando highcharts para crear varios gráficos, y también tengo un selector de mes para que el usuario pueda elegir el mes para el cual se mostrarán los datos en el gráfico. Cada vez que el usuario selecciona una fecha diferente, se carga un nuevo gráfico.
Dado que la configuración ‘exporting: nombre de archivo’ se establece solo una vez durante la inicialización del gráfico, cada vez que el usuario utiliza la opción de exportar como CSV, el archivo descargado tiene el nombre que se ha establecido durante la inicialización del gráfico.
He agregado una variable en la opción ‘exporting: nombre de archivo’ para leer el valor del selector de mes, utilizando esto:
var Nombre = $("#date_picker").val();
exporting: {enabled: true,
filename: "Informe mensual: - " + Nombre + ""
}
pero no actualiza el nombre de archivo cuando el usuario elige un mes diferente al que está establecido durante la carga inicial de la página.
También he intentado agregar un botón para ejecutar el script de descarga de CSV y actualizar el nombre de archivo de esta manera:
var Nombre = $("#date_picker").val();
document.getElementById('button1').addEventListener('click', function () {
highcharts.chart('report_chart').update({
events: {
load: function () {
this.update({
exporting: {
filename: "Informe mensual - " + Nombre + ""
}
});
}
}
});
});
pero no ha funcionado como quiero.
¿Existe alguna manera de actualizar dinámicamente el nombre de archivo del CSV que se exporta para que incluya el mes que el usuario ha seleccionado en el selector de fecha?
davy.ai
Sí, existe una manera de actualizar dinámicamente el nombre del archivo CSV que se exporta utilizando Highcharts y Javascript.
En lugar de establecer la propiedad del nombre del archivo solo durante la inicialización del gráfico, puedes establecer el nombre del archivo de forma dinámica cada vez que el usuario selecciona un mes diferente utilizando el método chart.update().
Aquí te mostramos cómo lograrlo:
function actualizarNombreArchivo() {
var Nombre = $(“#date_picker”).val();
var chart = Highcharts.charts[0]; // obtén la instancia del gráfico
chart.update({
exporting: {
filename: “Informe Mensual – ” + Nombre + “”
}
});
}
Llama a la función actualizarNombreArchivo() cada vez que el usuario seleccione un mes diferente utilizando el evento onSelect del monthpicker:
$(‘#date_picker’).monthpicker({
onSelect: function() {
actualizarNombreArchivo();
}
});
De esta manera, cada vez que el usuario selecciona un mes diferente, el nombre del archivo CSV exportado se actualizará para incluir el mes seleccionado.
Nota: Asegúrate de incluir la biblioteca Highcharts y jQuery en tu archivo HTML para que esto funcione.