Realice la función de exportación (descarga) del gráfico de gráfico alto en el proyecto Vue

De repente me encontré con el requisito de que los gráficos en el proyecto deben admitir la función de descarga (exportación de datos de gráficos) (el backend es demasiado perezoso para escribir una interfaz para descargar archivos).
El gráfico se muestra en la imagen:
inserte la descripción de la imagen aquí
actualmente mi gráfico está implementado con highchart en el proyecto Vue, y he visto ejemplos oficiales de highchart, casi todos tienen la función de exportar y descargar gráficos. inserte la descripción de la imagen aquí
Luego pensé que la función de exportación podría realizarse fácilmente agregando directamente qué configuración.
Como resultado, miré los elementos de configuración del gráfico de js, y todos son elementos de configuración comunes, nada especial, pero ¿por qué mi gráfico no tiene este botón de exportación? inserte la descripción de la imagen aquí
Así que busqué directamente la API en el sitio web oficial de Highchart y encontré un elemento de configuración que exportaba el significado, inserte la descripción de la imagen aquí
así que verifiqué los ejemplos y descubrí que no solo tiene el elemento de configuración de exportación, sino que habrá un método de exportación de gráfico bajo la instancia de highchart, que puede realizar un botón de personalización para exportar. inserte la descripción de la imagen aquí
Así que agregué un botón de exportación personalizado y un evento de acuerdo con el método de escritura anterior, pero la consola informó un error. El
código se muestra en la figura:
inserte la descripción de la imagen aquí
la consola se muestra en la figura: inserte la descripción de la imagen aquí
el ejemplo del ícono de gráfico alto, de hecho, he impreso pero se informa que no hay exportChart En este método, comencé con el objeto de instancia, así que hice una comparación entre mi instancia local impresa y el ejemplo en el sitio web oficial: Mi local: ejemplo de sitio web
oficial inserte la descripción de la imagen aquí
: inserte la descripción de la imagen aquí
Luego me sorprendió descubrir que mi instancia de gráfico local no tenía exportación, entonces es obvio que mi instancia local es una instancia de icono de gráfico alto incompleta.
Así que fui a Baidu para verificar el error de exportación del gráfico highchart en vue y encontré una publicación:
https://blog.csdn.net/weixin_30815427/article/details/97301451 inserte la descripción de la imagen aquí
se basa en la introducción de highchart, y se introducen dos archivos más exporting.js y export-csv.js en vista del uso de Highcharts en Vue
en el sitio web oficial Hay un caso de introducción de export-csv.js en el artículo, así que primero introduje export-csv.js, pero se informó el mismo error al usar el método exportchart. Abrí export-csv.js para encontrar esto método, y encontró que no hay ningún método exportChart. Eché un vistazo más de cerca al código interno y encontré dos métodos similares a exportar, pero no se llamaban exportChart, así que traté de llamar a estos dos métodos, y de hecho fue posible exportar (descargar) los datos del gráfico . Parecía que la demanda había sido satisfecha.Después de todo, es para descargar el archivo de datos, pero la imagen del gráfico que quiero no se ha realizado. Así que volví a descargar el archivo exporting.js y lo mencioné de acuerdo con el método export-csv.js, pero el archivo exporting.js informó un error. Encontré un problema nuevamente, no se asuste, el objetivo es muy claro, nada más que la falta de importaciones relacionadas con exporting.js, y parece incorrecto importar directamente el exporting.js descargado, así que una vez más tomé prestado el poder de Baidu para consultar: Vue Use la exportación de highchart. En el primer artículo que salió, vi la respuesta a la pregunta.
inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí

inserte la descripción de la imagen aquí




inserte la descripción de la imagen aquí
Los gráficos altos originales instalados se basan en la exportación a continuación. Inmediatamente introduje la exportación de acuerdo con esta ruta y usé la exportación importada para modificar mi gráfico alto.
inserte la descripción de la imagen aquí
Luego llame al método exportChart de la instancia en el evento de clic del botón personalizado.
inserte la descripción de la imagen aquí
Resultó ser todo un éxito.
inserte la descripción de la imagen aquí

inserte la descripción de la imagen aquí

Finalmente, decidí escribir ambos métodos en él, porque el método export-csv.js export xls o csv no necesita estar conectado a Internet, y puede generarse directamente llamando al método html en el front-end y descargando las imágenes deben solicitar https://export.highcharts .com/ generadas. Entonces, para evitar accidentes con el servicio Highchart, ¡mantengamos la función de exportación de archivos xls por ahora!
La dirección de descarga del recurso export-csv.js

Supongo que te gusta

Origin blog.csdn.net/weixin_43589827/article/details/118342919
Recomendado
Clasificación