Graficar medidas con HTML5

La etiqueta “meter”, permite graficar una cantidad en base a un rango mínimo y máximo.

La sintaxis es:

<meter min=”0” max=”100” value=”50”></meter>

Min:  Valor mínimo del rango

Max: Valor máximo del rango

Value: Valor actual.

Esta etiqueta nos puede servir para mostrar de forma gráfica cantidades, por ejemplo;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Elmento Meter</title>

</head>

<body>

   <p>Espacio disponible en el disco duro:<br>

    <meter min="0" max="100" value="70"></meter>70%</p>

</body>

</html>

Este elemento tiene parámetros adicionales, que permiten cambiar la apariencia del control, estos son:

High: indica a partir de que cantidad se considera un valor alto.

Low: indica a partir de que cantidad se considera un valor bajo.

Optimum. Indica la cantidad optima del rango, se muestra en color verde

Ejemplo:

    <p>Tempretauras</p>

    <p>Ciudad de México

    <meter min="0" max="50" high="35" low="15" optimum="25" value="10"></meter>

    </p>

    <p>Guadalajara

    <meter min="0" max="50" high="35" low="15" optimum="25" value="25"></meter></p>

    <p>Tuxtla Gutierrez

    <meter min="0" max="50" high="35" low="15" optimum="25" value="40"></meter></p>

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

4 × 2 =