1

Estoy tratando de obtener el dataURI() de react-apexchart, por lo que he probado, con apexchart, no hay problema con obtener el dataURI, pero con la integración con react, me genera problema...

Ejemplo:

import ReactApexCharts from 'react-apexcharts'

------------------
 this.state = {
      options: {
        chart: {id: 'chartDonuts'},
        labels: ['label1', 'label2', 'label3'],
        dataLabels: {
          enabled: true,
        },
        tooltip: {enabled: false},
        noData: {
          text: 'No se encontraron datos',
          align: 'center',
          verticalAlign: 'middle',
          offsetX: 0,
          offsetY: 0,
          style: {
            color: 'rgb(126, 126, 126)',
            fontSize: '14px',
            fontFamily: undefined,
          },
        },
        plotOptions: {
          pie: {
            customScale: 1,
            expandOnClick: true,
            offsetX: -40,
            offsetY: 0,
            donut: {
              size: '60%',
              labels: {
                show: true,
                total: {
                  show: true,
                  label: 'Total',
                  formatter: function(w) {
                    return (
                      w.globals.seriesTotals
                        .reduce((a, b) => {
                          return a + b
                        }, 0)
                        .toFixed(2) + 'h'
                    )
                  },
                },
                value: {
                  show: true,
                  formatter: function(val) {
                    return val + 'h'
                  },
                },
              },
            },
          },
        },
        legend: {
          position: 'bottom',
        },
      },
      series: [1,2,3],
    }
    
-------------

 <ReactApexCharts
   options={this.state.options}
   series={this.state.series}
   type='donut'
   width='380'
  />

El código anterior funciona bien, el problema comienza al querer obtener el datURI del gráfico generado...

Según apexcharts debería ser:

var chart = new ApexCharts(elemento, options);
var dataURL = chart.dataURI().then((uri) => {
  ....
})

https://apexcharts.com/docs/methods/#dataURI

Si alguien sabe como integrarlo con react-apexchart, se lo agradecería mucho...

2 respuestas 2

0

prueba usando ref en el componente para obtener el componente ya renderizado si estas usando clases o useRef si estas usando hooks

<ReactApexCharts
   options={this.state.options}
   series={this.state.series}
   type='donut'
   width='380'
   ref={this.chart}
/>

y para ejecutar el dataURI() tendrías que ponerlo en algún tipo de evento

this.chart.dataURI().then((uri) => {
  console.log(uri)
})
2
  • Hola Victor, muchísimas gracias... En verdad soy bastante nuevo con React, pero con la guía que me diste, me funcionó...
    – Neil
    el 25 dic. 2019 a las 23:21
  • Me alegra haberte ayudado, te pido que si te funciono marques la respuesta como aceptada, gracias el 25 dic. 2019 a las 23:32
0

Al final deje el código así:

<ReactApexCharts
  options={this.state.options}
  series={this.state.series}
  type='donut'
  width='380'
  ref={this.chart}
/>


<IconButton
  color='primary'
  className={classes.button}
  aria-label='Obtener PDF'
  size='medium'
  onClick={this.getPDF}
>
  <Icono />
</IconButton>

chart = (e) => {
    this.setState({componentChart: e})
  }
  
getPDF = () => {
  this.state.componentChart.chart.dataURI().then((uri) => {
    console.log('URI::', uri)
    var pdf = new jsPDF()
    pdf.addImage(uri, 'PNG', 0, 0)
    pdf.save('download.pdf')
  })
}

Muchas gracias Victor por la ayuda!!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.