Eportare chart in PrimeVUE

PrimeVUE ha disponibile tutta una serie di chart da usare.

Ma tra le opzioni non c'è la possibilità di esportarli.

Ma dato che si basano su Chart.js possiamo porre rimedio.

Cominciamo con una funzione nel nostro componente:

  methods: {
    downGrafico() {
      const chartAndamento = document.getElementById('chart_pesi');
      const canvasElement = chartAndamento.childNodes[0];

      const link = document.createElement('a');
      link.download = 'download.png';
      link.href = canvasElement.toDataURL();
      link.click();
    }
  }

Chart.js sfrutta i canvas per il rendering del grafico; quindi la prima cosa che dobbiamo fare è "trovare" il canvas dentro al nostro oggetto Chart.

Vi basta dare un'occhiata al sorgente; comunque è standard, quindi dovrebbe funzionare per tutti allo stesso modo.

A questo punto nella pagina:

<Button icon="pi pi-download" class="p-button-rounded p-button-success" @click="downGrafico"/>
<Chart id="chart_pesi" type="line" :data="basicData" :options="basicOptions"/>

Notate che al Chart ho assegnato un id, che è quello che uso nella funzione sopra.

Enjoy!