C3: Exportando este increíble gráfico

Hola ,

Los gráficos C3 son los mejores gráficos disponibles. No puedo creer lo fácil que es generar cualquier gráfico.

Lo único es que, ¿cómo exporto un gráfico?

Ayúdame en este sentido.

Gracias.

También estoy tratando de exportar el gráfico a pdf o quiero convertirlo a una imagen ... si alguien tiene una idea, por favor ayude

No es tan fácil de hacer únicamente en Javascript, especialmente si desea admitir muchas versiones de navegador. Si el navegador admite lienzo (todos los navegadores modernos lo hacen), hay una manera bastante fácil. Puede usar la biblioteca canvg (https://code.google.com/p/canvg/), que convierte SVG en lienzo.
Luego, algo como esto (http://www.nihilogic.dk/labs/canvas2image/) para permitir que el usuario lo guarde como archivo de imagen localmente. Sin embargo, no lo intenté yo mismo, por lo que no puedo decir si funciona de manera confiable con gráficos C3. Pero esta es una dirección para explorar.

Hola, creo que esto podría ser útil (http://jsfiddle.net/8ypxW/3/) pero aún no lo he logrado.
Lo que intento es poner nuestro gráfico C3 (etiqueta div) dentro del código original (etiqueta span) pero el resultado de la descarga que obtengo es una imagen vacía.
Actualización: http://jsfiddle.net/panubear/mGDt8/ >> La imagen de salida se produjo sin el gráfico c3.

Estoy haciendo esto para el generador de gráficos basado en C3 en el que estoy trabajando, compartirá mi código una vez que esté listo. Estuvo de acuerdo con @lblb 's punto sobre canvg, eso es lo que el uso de cuarzo en su ChartBuilder. Para obtener una idea de cómo hacer esto, además de generar archivos PNG, consulte: https://github.com/Quartz/Chartbuilder/blob/master/js/chartbuilder.js#L295

De acuerdo, esto funciona. Aquí está mi directiva Angular para hacer esto , muy descaradamente tomada de Quartz / Chartbuilder . Ignore todas las cosas de Angular, todo el trabajo real se realiza en createChartImages() .

En resumen, esto es lo que tenía que hacer:

1. Cree un elemento canvas vacío.
2. Tome todos los estilos de c3.js y colóquelos en línea en la mayoría de los elementos SVG, teniendo cuidado de no hacer esto con ninguno de sus objetos relacionados con los datos (que están coloreados a través del atributo de estilo CSS. La línea 6 de c3.css reemplace cualquier color de línea de datos establecido a través de C3 con stroke: #000 y fill: none .).
3. Busque los elementos que tengan "ocultos" para la propiedad de "visibilidad" de CSS y configúrelos en "display: none". Esto oculta todos los ejes no utilizados de C3.
4. Configure fill: none en todas las rutas de datos SVG para que no obtenga el extraño efecto de recorte bezier.
5. Con Canvg , genere un

Tenga en cuenta que solo he probado esto con gráficos de series simples, es muy posible que los otros tipos de gráficos tengan problemas y necesiten sus propios ajustes específicos.

Editar: Parece que los tipos de "área" rompen totalmente la salida PNG, aunque la salida SVG parece estar bien. Lo arreglé para que la salida SVG funcione para todos los tipos de gráficos, AFAIK.

Última edición: he actualizado el Gist, ahora debería funcionar para todos los tipos de gráficos, tanto PNG como SVG. con la esperanza de lanzar LlamaCharts en algún momento de los próximos días si alguien quiere una implementación funcional con la que jugar.

Hola @aendrew

He estado trabajando en un exportador, que admite .png , .jpeg , .gif y .pdf . por favor vea mi solicitud de extracción aquí

Sin embargo, mi método es una implementación _server-side_ que se basa en phantomjs. En mi opinión, sería una buena idea tener también un exportador del lado del cliente. Me encantaría ver tu versión completa.

@yuvii ¡Hola! Lancé mi proyecto (probablemente debería haber actualizado este problema ...), es a

Puedes jugar con él en línea en http://times.github.io/axisJS/

PDF es muy útil, echará un vistazo a tu PR. En última instancia, necesito formatos de impresión para axisJS en breve ...

Oh, vaya, en realidad siguió adelante e hizo una GUI completa para esto. Acabo de crear una herramienta de línea de comandos para exportar. Muy bien, hombre.

Este es más un problema de soporte en este momento que algo tan cerrado. La herramienta CLI de @yuvii es realmente genial y útil, así que

Cualquiera que llegue a esto, la implementación de @gonsakon aquí hace lo que hice con Angular, pero con jQuery, ¡podría ser un ejemplo más fácil que el que he dado!

Hola, estoy tratando de convertir el gráfico c3, es decir, SVG en imagen, pero no funciona.
Parece que c3.css, que es un CSS externo, no se está aplicando.
¿Cómo podemos aplicar el CSS externo a un SVG?

@ raj-mehta Pregunte en el Grupo de Google C3 , este es un tema cerrado y la falta de detalles que ha proporcionado con su consulta hace que sea prácticamente imposible ayudarlo.

Gracias por tu reversión
Utilizo el siguiente svg y lo utilicé en ur sample.html, pero el gráfico en el navegador y la imagen convertida de canvg no coinciden.

Tengo el mismo problema que raj-mehta con las barras de eje extra anchas. ¿Ha encontrado una solución para esto?

El problema es que solo los estilos en línea importan al realizar la exportación. Modifiqué mi versión local de c3 para incluir algunos estilos adicionales (como fill-opacity: 0 para gráficos de líneas que muestran un fondo negro extraño) y la imagen sale como se esperaba.

@aendrew por favor dime la fuente de este http://times.github.io/axisJS/#/ Necesito este tutorial .. por favor ayúdame

Puede agregar la función de exportación PNG a los gráficos c3 usando mi módulo: https://github.com/annatomka/ng-c3-export

Hola @annatomka, ¿puedo usar https://github.com/annatomka/ng-c3-export con gráficos de carga asíncronos? Mi código:

app.controller ("ChartController", función ($ http) {
$ http.get ('URL').
éxito (función (datos, estado, encabezados, configuración) {
c3.generate ({
bindto: "# Mi-gráfico",
datos: {
tipo: 'pastel',
columnas: [
['muestra', 30],
['muestra2', 200]
]
}
});
}).
error (función (datos, estado, encabezados, configuración) {
depurador
});

: Dibuja el gráfico correctamente pero sin icono de descarga

@annatomka Gran módulo, pero también tengo problemas con los gráficos de carga asíncronos. El botón de descarga desaparece una vez que vuelvo a generar el gráfico.

@annatomka ¡ Eso es tan bueno! ¡Estoy usando totalmente su módulo en el próximo proyecto angular que haga!

@annatomka +1

@ morales-franco @johnmarkli Arreglé el problema de carga asíncrona, puedes probarlo en la nueva versión (0.1.5). También agregué algunos ejemplos.

@annatomka Mi gráfico circular está saliendo a la luz

¿Qué me falta en css?

@annatomka Gran módulo, pero también tengo problemas con los navegadores. No funciona en Internet Explorer su módulo. ¿Puedes arreglar el error? Gracias

En serio, gente. Si tiene problemas con annatomka / ng-c3-export, infórmelos en la

Hilo de bloqueo.