Herramientas de usuario

Herramientas del sitio


contrib:wchart

🚧 wChart 🚧

Esta clase Néfeliza el control Chart.js, permitiendo incluir en nuestras web gráficos para la representación de datos de una manera sencilla y muy vistosa.

Ha sido realizada como una contribución a Néfele.

Ejemplo de uso

/* Este ejemplo corresponde al que puede encontrar en la página inicial de Chart.js */
   WITH OBJECT WChart():New(:WO)
      :cHeight := 300
      :cWidth := 500
      WITH OBJECT :Configure()
         :type := 'bar'
         WITH OBJECT :data
            :labels := {'Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'}
             WITH OBJECT :DataSet()
                :label := '# of Votes'
                :data  := {12, 19, 3, 5, 2, 3}
                :backgroundColor := {'rgba(255, 99, 132, 0.2)',;
                                     'rgba(54, 162, 235, 0.2)',;
                                     'rgba(255, 206, 86, 0.2)',;
                                     'rgba(75, 192, 192, 0.2)',;
                                     'rgba(153, 102, 255, 0.2)',;
                                     'rgba(255, 159, 64, 0.2)'}
                :borderColor := {'rgba(255, 99, 132, 1)',;
                                 'rgba(54, 162, 235, 1)',;
                                 'rgba(255, 206, 86, 1)',;
                                 'rgba(75, 192, 192, 1)',;
                                 'rgba(153, 102, 255, 1)',;
                                 'rgba(255, 159, 64, 1)'}
                :borderWidth := 1
             END WITH
          END WITH
          WITH OBJECT :options
             :responsive := .F.  // Por defecto lo tenemos a .T.

             // Podemos asignar una propiedad directamente
             :scales:yAxe():ticks:beginAtZero := .F. // El gráfico no empieza en 0, por defecto es .T. 

/*  También podemos ir accediendo a la estructura del objeto hasta llegar a la propiedad
             WITH OBJECT :scales
                WITH OBJECT :yAxe()
                   WITH OBJECT :ticks
                      :beginAtZero := .F. // El gráfico no empieza en 0, por defecto es .T. 
                   END WITH
                END WITH
             END WITH
*/

          END WITH
       END WITH
       :Create()
    END WITH

Propiedades

Nombre Init Descripción Versión
cClassId 'chart' 0.3
cHeight Altura del contenedor del gráfico, no es operativo si definimos el gráfico como responsive 0.3
cWidth Ancho del contenedor del gráfico, no es operativo si definimos el gráfico como responsive 0.3
cAlign xc_NoAlign Alineación del grafico dentro de su contenedor 0.3

Métodos

Nombre Descripción Versión
Configure Este método nos devuelve el objeto Chart que corresponde con el gráfico a presentar, las propiedades de este objeto están documentadas en la ayuda de Chart.js 0.3

Agradecimientos

A Joaquim Ferrer Godoy quim_ferrer@yahoo.es por contribuir con este fantástico control a Néfele.

contrib/wchart.txt · Última modificación: 11/04/2022 12:34 por pedro