Export grafice cu Chart.js in SVG

Salutare!

A reusit cineva sa faca un export svg al unui grafic in Chart.js?

Am incercat solutia de mai jos plus alte enbunii si nu prea a mers niciuna.

Sau macar daca este o biblioteca de conversie din canvas in svg.

Ba SVG-ul era gol, ba dadea erori prin alta parte.

Canvas-ul e practic o imagine, ca sa creezi un svg trebuie sa faci prima data un svg si dupa posibil sa il desenezi pe canvas, dar sa il ai undeva… In cel mai bun caz exista librarii care folosesc un scene graph si tot ce deseneaza e un obiect. (d3/fabric)

Exista si librarii care inlocuiesc call-urile la API-ul de canvas si il transforma in SVG, asta face canvas2svg. Acum prima data tu trebuie sa configurezi chart.js sa deseneze o imagine pe canvas cat mai simplu, dupa ce face asta trebuie sa inlocuiesti call-urile cu cele ale lui canvas2svg (mai bine zis inlocuiesti canvas-ul din browser cu canvas-ul care genereaza un svg)

Ai scos animatiile si responsive de la chart.js ?

// deactivate responsiveness and animation
graphData.options.responsive = false;
graphData.options.animation = false;

Eventual ai putea pune un exemplu cu codepen/stackblitz.

Am cautat script-uri care folosesc canvas2svg:

Am gasit si un exemplu cu tweaklib:

si

Ca sa faci exemplele sa mearga trebuie sa te duci la Settings → Js si sa adaugi Chart.Js si canvas2svg.

2 Likes

Multumesc :slight_smile:
Fix asa am facut, dar nu prea a vrut. In cam toate exemplele am vazut treaba aia tweakLib() care tot ce facea era sa verifice daca este 2d sau 2D
Manarea acea biblioteca :sweat_smile:

Cand apelam treaba aia, apareau alte erori care nu aveau treaba cu svg-ul.
Una din ele zicea ceva de genu’ ca i.removeListener is undefined. Dar era de la un alt plugin(chart js zoom) care nu avea legatura cu exportul

Mai bricolez si maine pe acolo si daca gasesc ceva, adaug la topic.

LE: tweakLib() era in codul meu. O adaug maine in acea biblioteca sa vad daca mai face figuri! :slight_smile:

E posibil sa fie si ceva versiune specifica necesara.

Vezi url-ul si schimba versiunea cu o versiune de aici pana nimeresti una care merge.
https://cdn.jsdelivr.net/npm/[email protected]

Follow up dupa o luna si ceva

Cu exceptia titlului si legendei, exportul in SVG nu mi-a adus un beneficiu prea mare. Asa ca nu am mai implemetat.

In schimb, biblioteca metionata la cafenea stie sa exporte si in SVG.

@isti37 am in plan sa fac upoodate la versiunea 3 de ChartJs.
Voi reveni cu follow up dupa update

Apropo de asta, eu am implementat ceva cod de export in svg pentru un proiect, fara sa folosesc nici o biblioteca. Pur si simplu era necesar doar un subset, iar svg e simplu.

Fata de dxf (yeap, am implementat si de-ala de Autocad, chestii 3D relativ complicate) si Visio, svg a fost o banalitate ultra-usoara.

Super
Este intr-un proiect open source sau este pt ceva la un proiect comercial?

Din pacate comercial. Open source le implementez mai basic putin :stuck_out_tongue:

Cu Chart.js v3.7 si cu Canvas2svg :