2

Tengo que hacer este grafico en html, donde el valor que tiene la columna "NIVEL" sera el tamaño del grafico: introducir la descripción de la imagen aquí

Para simular el grafico, lo intenté pintando un dentro de cada celda, pero se ven los bordes de las columnas.

introducir la descripción de la imagen aquí

Alguien tiene una idea de como poder realizar el grafico y que se vea como en la primera imagen? Muchas gracias.

Parte del codigo de la tabla lo tengo así:

 <table>
    <tbody>
        <tr>
            <td rowspan="2"><strong>NIVEL</strong></td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td></td>
            <td><div class="graficoAmarillo"></div></td>
            <td><div class="graficoAmarillo"></div></td>
            <td><div class="graficoAmarillo"></div></td>
        </tr>
        </tbody>
</table>
3
  • Hola y bienvenido a Stack Overflow en español. Puede serte de interés realizar el recorrido de bienvenida y leer Cómo preguntar. Dado que la pregunta es de como pintarlo y has puesto el HTML, es necesario, que pongas el código CSS asociado a dicha pregunta.
    – Javi fer2
    Commented el 19 dic. 2020 a las 9:36
  • Este problema se resuelve en el CSS. Una ayuda podría ser poniendo las celdas td coloreadas con border:none; y luego background:yellow;
    – aeportugal
    Commented el 19 dic. 2020 a las 17:09
  • ¿Realmente necesitas una tabla para esto? Parece más un gráfico que una tabla con datos.
    – Alvaro Montoro
    Commented el 19 dic. 2020 a las 23:25

2 respuestas 2

0

Para lograr algo similar a la imagen, utilizando tablas, vas necesitar utilizar muchas propiedades CSS que quizas no conozcas:

  • border-collpase: para que los bordes de las celdas y la tabla no se dupliquen
  • box-sizing: para que las celdas midan exactamente lo que establecemos en su width
  • calc: para hacer cálculos matemáticos y los elementos midan exactamente lo que necesitamos
  • translate: en este caso, para centrar el elemento verticalmente
  • box-shadow: para crear sobras sobre un elemento.

Empleando las propiedades CSS anteriores y otras más, podemos lograr lo siguiente:

Ejemplo:

.table {
  border-collapse: collapse;
  background-color: white;
  border: 2px solid #000;
}
.table td {
  box-sizing: border-box;
  border: 2px dashed #000;
}
.table-header,
.table-subheader {
  border: 2px solid #000 !important;
  color: white;
  font-weight: bold;
  background-color: blue;
  text-align: center;
  width: 100px;
}
.table-subheader {
  color: black;
  background-color: white;
}
.table-height-3 {
  height: 150px;
}

.table-bar {
  position: absolute;
  width: calc(100px - (6px * 2)); /* cell-width - (bar-margin x 2) */
  margin-left: calc(6px - 2px); /* bar-margin - cell-border-width */
  height: 40px;
  transform: translate(0, -50%);
  box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.75);
}

.table-bar-yellow {
  background-color: yellow;
}

.table-bar-w3 {
  width: calc((100px * 3) - (6px * 2)); /* (cell-width x 3) - (bar-margin x 2) */
}
<table class="table">
  <thead>
    <tr>
      <td class="table-header" rowspan="2"><strong>NIVEL</strong></td>
      <td class="table-header" colspan="2">Bajo</td>
      <td class="table-header">Medio</td>
      <td class="table-header" colspan="2">Alto</td>
    </tr>
    <tr>
      <td class="table-subheader">1</td>
      <td class="table-subheader">2</td>
      <td class="table-subheader">3</td>
      <td class="table-subheader">4</td>
      <td class="table-subheader">5</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="table-subheader table-height-3">3</td>
      <td>
        <div class="table-bar table-bar-yellow table-bar-w3"></div>
      </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

0

puedes usar los graficos de google https://developers-dot-devsite-v2-prod.appspot.com/chart

Son bastante sencillos de usar

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>




  google.charts.load('current', {packages: ['corechart', 'bar']});
  google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

  var data = google.visualization.arrayToDataTable([
    ['Titulo', 'Titulo2',],
    ['linea1', 3],
    ['linea2', 1],
    ['linea3', 5],
    ['linea4', 2]
  ]);

  var options = {
    backgroundColor: { fill:'transparent' },
    legend: {position: 'none'},
    chartArea: {width: '100%'},
    hAxis: {
        baselineColor: 'transparent',
       textPosition: 'none',
       gridlines: {count: 0}
    },
    vAxis: {
   
    }
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

  chart.draw(data, options);
}

de este modo obtienes las barras con fondo trasparente que puedes decorar como necesitas al rededor del chart_div

1
  • 1
    Si bien este enlace puede responder a la pregunta, es mejor incluir las partes esenciales de la respuesta aquí y proporcionar el enlace como referencia. Las respuestas que son únicamente un enlace pueden dejar de ser válidas si la página vinculada cambia. - Desde revisión
    – DavElsanto
    Commented el 10 mar. 2023 a las 16:51

Tu Respuesta

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

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