Estoy tratando de crear un gráfico de barras horizontales en HTML plano. (Por lo que estoy tratando de hacer, el requisito es que todo encaje en un solo archivo foo.html; CSS en línea está bien, pero no JavaScript, no hay imágenes PNG externas). La técnica clásica para este tipo de cosas parece para establecer el ancho y el color de fondo de las celdas de la tabla, así que llegué a este simple caso de prueba:

<!DOCTYPE html>
<html lang="en">
<body>
  <table>
    <tr>
      <td>First</td>
      <td>
        <div style='background-color:blue; width:500'>
          Blue
        </div>
      </td>
    </tr>
    <tr>
      <td>Second</td>
      <td>
        <div style='background-color:green; width:1000'>
          Green
        </div>
      </td>
    </tr>
  </table>
</body>
</html>

Esto no funciona; cuando lo cargo en la última versión de Chrome, las barras azul y verde aparecen en sus colores correctos, pero ambas en la misma longitud muy corta, ignorando los números de ancho especificados.

Sin embargo, si elimino la primera línea, la etiqueta DOCTYPE, ¡funciona perfectamente! Las barras azules y verdes aparecen en sus longitudes especificadas.

Pero el validador HTML dice que DOCTYPE realmente debería estar presente, y me temo que omitirlo solo deja el navegador en un modo más antiguo que ahora puede estar en desuso y podría dejar de ser compatible en el futuro.

¿Cuál es la mejor manera de hacer que esto funcione?

1
rwallace 31 oct. 2019 a las 10:13

4 respuestas

La mejor respuesta

Simplemente agregue 'px' después de los valores.

<!DOCTYPE html>
<html lang="en">
<body>
  <table>
    <tr>
      <td>First</td>
      <td>
        <div style='background-color:blue; width:500px'>
          Blue
        </div>
      </td>
    </tr>
    <tr>
      <td>Second</td>
      <td>
        <div style='background-color:green; width:1000px'>
          Green
        </div>
      </td>
    </tr>
  </table>
</body>
</html>

enter image description here

5
Oliver Hörold 31 oct. 2019 a las 07:18

Puede incrustar código SVG en línea utilizando la etiqueta <svg> en HTML5 e incluso aplicar propiedades CSS a sus elementos.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <Title>Bar Chart Example</title>
  <style>
    .chart text {
      fill: white;
      font: 10px sans-serif;
      text-anchor: end;
    }
  </style>
</head>
<body>

  <svg class="chart" width="100%" height="120">
    <g transform="translate(0,0)">
      <rect width="40" height="19" fill="blue"></rect>
      <text x="37" y="9.5" dy=".35em">4</text>
    </g>
    <g transform="translate(0,20)">
      <rect width="80" height="19" fill="green"></rect>
      <text x="77" y="9.5" dy=".35em">8</text>
    </g>
    <g transform="translate(0,40)">
      <rect width="150" height="19" fill="orange"></rect>
      <text x="147" y="9.5" dy=".35em">15</text>
    </g>
    <g transform="translate(0,60)">
      <rect width="160" height="19" fill="magenta"></rect>
      <text x="157" y="9.5" dy=".35em">16</text>
    </g>
    <g transform="translate(0,80)">
      <rect width="230" height="19" fill="darkcyan"></rect>
      <text x="227" y="9.5" dy=".35em">23</text>
    </g>
    <g transform="translate(0,100)">
      <rect width="420" height="19"  fill="red"></rect>
      <text x="417" y="9.5" dy=".35em">42</text>
    </g>
  </svg>

</body>
</html>
    .chart text {
      fill: white;
      font: 10px sans-serif;
      text-anchor: end;
    }
  <svg class="chart" width="100%" height="120">
    <g transform="translate(0,0)">
      <rect width="40" height="19" fill="blue"></rect>
      <text x="37" y="9.5" dy=".35em">4</text>
    </g>
    <g transform="translate(0,20)">
      <rect width="80" height="19" fill="green"></rect>
      <text x="77" y="9.5" dy=".35em">8</text>
    </g>
    <g transform="translate(0,40)">
      <rect width="150" height="19" fill="orange"></rect>
      <text x="147" y="9.5" dy=".35em">15</text>
    </g>
    <g transform="translate(0,60)">
      <rect width="160" height="19" fill="magenta"></rect>
      <text x="157" y="9.5" dy=".35em">16</text>
    </g>
    <g transform="translate(0,80)">
      <rect width="230" height="19" fill="darkcyan"></rect>
      <text x="227" y="9.5" dy=".35em">23</text>
    </g>
    <g transform="translate(0,100)">
      <rect width="420" height="19"  fill="red"></rect>
      <text x="417" y="9.5" dy=".35em">42</text>
    </g>
  </svg>

Lo anterior se basa en un ejemplo de aquí o < a href = "https://bost.ocks.org/mike/bar/2/" rel = "nofollow noreferrer"> aquí, y puede ajustarlo al contenido de su corazón. Por ejemplo, especificar texto de subtítulos oscuros para mostrar encima de un color claro, agregar un borde, cambiar el color de fondo o agregar reglas. No he probado con todos los navegadores, pero pasa el validador W3C.

También puede usar esto con SVG generados por un editor de imágenes u hoja de cálculo, y con diferentes tipos de gráficos.

2
Davislor 31 oct. 2019 a las 18:04
**I think you do like this**

            <!DOCTYPE html>
            <html lang="en">
            <body>
              <table style="width:100%;">
                <tr>
                  <td style="width:70px;">First</td>
                  <td>
                    <div style="background-color:blue; width:60%;">
                      Blue
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>Second</td>
                  <td>
                    <div style="background-color:green; width:100%;">
                      Green
                    </div>
                  </td>
                </tr>
              </table>
            </body>
            </html>
2
Dilip Patra 31 oct. 2019 a las 07:25

El estilo de div debería ser como este style = 'background-color: green; ancho: 1000 px 'px es imprescindible

2
Sathees karan 31 oct. 2019 a las 07:23