Comenzando Con Chart.js: Escalas

() translation by (you can also view the original English article)

En los últimos cuatro tutoriales, has aprendido muchas cosas sobre Chart.js. Después de leer los primeros cuatro tutoriales, ahora deberías poder personalizar las descripciones emergentes de texto y etiquetas, cambiar las fuentes, y crear diferentes tipos de gráfica. Un aspecto de Chart.js que aún no ha sido cubierto en esta serie son escalas.

Las escalas han cambiado mucho desde la versión v1.0 de la librería y ahora son mucho más poderosas. En este tutorial, aprenderás cómo manipular escalas y controlar su apariencia usando diferentes opciones que la librería proporciona.

Cambiando Líneas de Cuadrícula

Todas las opciones de configuración para líneas de cuadrícula están anidadas bajo la opción escala en la llave gridLines. Esta llave define opciones para personalizar las líneas de cuadrícula que corren perpendiculares a los ejes. Cambiemos las líneas de cuadrícula de la gráfica de línea que creaste en el tutorial gráficas de línea y barra.

Puedes mostrar u ocultar las líneas de cuadrícula de una gráfica usando la llave display. Su valor inicial es true, así que las líneas de cuadrícula se muestran por defecto. El color de las líneas de cuadrícula puede ser especificado usando la llave color. Si quieres que las líneas de cuadrícula se compongan de guiones en vez de ser líneas sólidas, puedes proporcionar un valor para la longitud y espaciado de los guiones como un valor de la llave borderDash. Puedes establecer la anchura y color de las líneas para el primero índice o cero usando las llaves zeroLineWidth y zeroLineColor respectivamente.

En todas las gráficas hasta este punto, las escalas no tenían ningún texto descriptivo para permitir a los usuarios saber lo que un eje particular representaba. Esto puede hacer a las gráficas menos útiles. Por ejemplo, si ves un trazado de la velocidad de un carro y no puedes descifrar las unidades en las que la velocidad está trazada en el eje y, la gráfica es prácticamente inútil.

Puedes mostrar u ocultar las etiquetas de escala en una gráfica usando la llave display. Las etiquetas de escala están ocultas por defecto. El texto que debería ser mostrado en estas escalas puede ser especificado usando la llave labelString. También puedes controlar el color, familia, tamaño y estilo de fuente usando las llaves fontColor, fontFamily, fontSize, y fontStyle repectivamente.

Aquí está la misma vieja gráfica de velocidad de carro con un conjunto de opciones de gráfica diferente especificado.

var chartOptions = {
  legend: {
    display: true,
    position: 'top',
    labels: {
      boxWidth: 80,
      fontColor: 'black'
    }
  },
  scales: {
    xAxes: [{
      gridLines: {
        display: false,
        color: "black"
      },
      scaleLabel: {
        display: true,
        labelString: "Time in Seconds",
        fontColor: "red"
      }
    }],
    yAxes: [{
      gridLines: {
        color: "black",
        borderDash: [2, 5],
      },
      scaleLabel: {
        display: true,
        labelString: "Speed in Miles per Hour",
        fontColor: "green"
      }
    }]
  }
};

Hay una llave más llamada offsetGridLines. Cuando se establece a true, mueve las etiquetas a la mitad de las líneas de cuadrícula. Esto es generalmente útil cuando se crean gráficas de barra.

Configurando Escalas Lineales

Las escalas lineales son usadas para graficar datos numéricos. Estas escalas pueden ser creadas ya sea en el eje x o y. En la mayoría de los casos, Chart.js detecta de manera automática los valores mínimo y máximo para las escalas. Sin embargo, esto puede resultar en alguna confusión.

Digamos que quieres trazar las calificaciones de estudiantes en una clase. Si las calificaciones máximas para el examen fueran 200 pero ninguno de los estudiantes sacó más de 180, la escala muy probablemente tendría como máximo 180. En tales casos, lo lectores no tendrán manera de saber si la calificación máxima fue 180 o 200.

Chart.js tiene múltiples opciones integradas que te permiten controlar diferentes llaves para escalas. Puedes especificar el valor mínimo y máximo para escalas usando las llaves min y max. El tamaño del paso de las escalas puede ser controlado usando la propiedad stepSize. De esta manera, puedes determinar cuántas líneas de cuadrícula deberían ser dibujadas en la gráfica. Otra manera de establecer un límite sobre el número de líneas de cuadrícula y marcas mostradas en una gráfica es usar la llave maxTicksLimit.

Aquí está el código para especificar los valores de escala mínimo y máximo para la escala horizontal en la gráfica de barra para un tutorial anterior en la serie.

var chartOptions = {
  scales: {
    yAxes: [{
      barPercentage: 0.5,
      gridLines: {
        display: false
      }
    }],
    xAxes: [{
      gridLines: {
        zeroLineColor: "black",
        zeroLineWidth: 2
      },
      ticks: {
        min: 0,
        max: 6500,
        stepSize: 1300
      },
      scaleLabel: {
        display: true,
        labelString: "Density in kg/m3"
      }
    }]
  },
  elements: {
    rectangle: {
      borderSkipped: 'left',
    }
  }
};

Al igual que la escala lineal, también puedes crear escalas logaritmicas para trazar valores sobre tu gráfica. En este caso, la interpolación logaritmica es usada para determinar la posición de un punto en los ejes. Estas escalas también pueden ser colocadas tanto en el eje x como en el eje y.

Configurando Escalas Radiales Lineales

Este tipo de escala es usado para gráficas de tipo radar y de área polar. A diferencia de la escala lineal regular, esta superpone al área de la gráfica en lugar de ser posicionada sobre los ejes.

Hay muchas llaves especialmente orientadas a escalas radiales. Por ejemplo, puedes usar la llave lineArc para especificar si las líneas de cuadrícula deberían ser circulares o rectas. El valor por defecto es false para gráficas de radar y true para gráficas de área polar.

Puedes controlar la apariencia de las líneas que radian desde el centro de la gráfica a sus etiquetas de punto usando la llave angleLines. Esta acepta un objeto como su valor. El objeto puede contener llaves para controlar el color y el grosor de líneas de ángulo. Puedes ocultar las líneas de ángulo estableciendo el valor de la llave display a false. El color y grosor de las líneas de ángulo pueden ser controlados usando las llaves color y lineWidth.

La apariencia de etiquetas de punto puede ser controlada usando la llave pointLabels. Justo como las líneas de ángulo, esta llave también acepta un objeto como su valor. Por favor nota que estas opciones solo tienen efecto cuando el valor de lineArc es establecido a false. El color, familia, tamaño y estilo de fuente puede ser especificado usando las llaves fontColor, fontFamily, fontSize, y fontStyle.

También puedes establecer un valor mínimo y máximo para la escala usando las llaves min y max. El tamaño del paso y número máximo de marcas en la escala pueden ser especificados usando las llaves stepSize and maxTicksLimit. Estas opciones están disponibles bajo la llave ticks. Algunas otras llaves disponibles dentro de ticks son showLabelBackdrop, backdropColor, backdropPaddingX, y backDropPaddingY. Puedes usarlas para mostrar y ocultar el fondo detrás de las etiquetas de marca y controlar su anchura, altura y color.

También puedes usar la llave gridLines que usamos para la gráfica de linea para establecer un color y grosor para las líneas de cuadrícula en una gráfica de radar. Aquí hay algunas opciones para crear una gráfica de radar con escalas personalizadas.

var chartOptions = {
  scale: {
    gridLines: {
      color: "black",
      lineWidth: 3
    },
    angleLines: {
      display: false
    },
    ticks: {
      beginAtZero: true,
      min: 0,
      max: 100,
      stepSize: 20
    },
    pointLabels: {
      fontSize: 18,
      fontColor: "green"
    }
  },
  legend: {
    position: 'left'
  }
};

Configurando Escalas de Tiempo

Puedes usar una escala de tiempo para mostrar horarios y fechas en una gráfica. Como se mencionó en el tutorial de introducción de Chart.js, necesitas incluir Moment.js en tus proyectos para mostrar tiempo. Una restricción sobre usar una escala de tiempo es que puede ser mostrada solo en el eje x. Todas las opciones de configuración para la escala de tiempo están ubicadas bajo la sub-opción time.

Para crear una escala de tiempo, tienes que establecer el valor de la llave type a time bajo la sub-opción xAxes. Después de eso, puedes establecer el valor de diferentes claves bajo time. La unidad que debería ser usada para dibujar las marcas es establecida usando la llave unit.

El paso de la unidad puede ser especificado usando la llave unitStepSize. El formato en el cuál las etiquetas para las marcas debería ser mostrado es especificado usando la sub-opción displayFormats. Puedes leer más sobre formatos permitidos de cadena de texto en el sitio web de Moment.js.

El formato en el cuál se muestra el tiempo en las descripciones emergentes de texto puede ser especificado usando la llave tooltipFormat.

También puedes redondear el tiempo antes de trazarlo en la gráfica usando la llave round. Ten cuidado cuando establezcas un valor para round. Digamos que estableces su valor a hour y y hay dos horarios que necesitan ser trazados en la gráfica. Si un horario es 5:20 AM y otro es 5:50 AM, ambos serán trazados en la marca de 5:00 AM. Establecer su valor a minute los trazará en las marcas 5:30 y 5:50 respectivamente.

La gráfica de línea trazada al inicio del tutorial podría ser trazada usando una escala de tiempo con la ayuda del siguiente código.

var chartOptions = {
  legend: {
    display: true,
    position: 'top',
    labels: {
      boxWidth: 80,
      fontColor: 'black'
    }
  },
  scales: {
    xAxes: [{
      type: "time",
      time: {
        unit: 'hour',
        unitStepSize: 0.5,
        round: 'hour',
        tooltipFormat: "h:mm:ss a",
        displayFormats: {
          hour: 'MMM D, h:mm A'
        }
      }
    }],
    yAxes: [{
      gridLines: {
        color: "black",
        borderDash: [2, 5],
      },
      scaleLabel: {
        display: true,
        labelString: "Speed in Miles per Hour",
        fontColor: "green"
      }
    }]
  }
};

Ideas Finales

Este tutorial te ayudó a aprender sobre distintos tipos de escalas en Chart.js. Ahora puedes personalizar fácilmente las escalas en una gráfica controlando su color, valor mínimo y máximo, número de marcas, y otros factores.

Después de leer los cinco tutoriales en esta serie, deberías ahora poder crear todos los tipos de gráficas disponibles en Chart.js. Espero que te haya gustado el tutorial y la serie.

Si estás buscando recursos adicionales para estudiar o usar en tu trabajo, revisa lo que tenemos disponible en el marketplace de Envato. Si tienes alguna pregunta, por favor déjame saber en los comentarios. ¿Alguna vez has usado esta librería en tus propios proyectos? Por favor comparte algunos consejos en los comentarios.