Grafik batang horizontal html css

Question

Untuk memvisualisasikan data Anda dengan diagram batang, kelas

#my-chart.bar {
  height: 200px;
  max-width: 300px;
  margin: 0 auto;
}

8 utama harus diikuti oleh kelas

#my-chart.bar {
  height: 200px;
  max-width: 300px;
  margin: 0 auto;
}

9

Table of Contents Show

Beberapa Kumpulan Data
Sumbu Utama
Sumbu Sekunder
Bagaimana cara membuat grafik batang horizontal di CSS?
Bagaimana cara menambahkan bilah horizontal di HTML?
Bagaimana Anda membuat grafik batang di HTML CSS?
Contoh Bagan Batang HTML. Hanya Menggunakan HTML Dan CSS
Bagaimana Anda memplot grafik batang horizontal?

...

Ukuran

Untuk mengontrol dimensi bagan, Anda dapat menggunakan CSS biasa. Anda dapat menggunakan kueri media untuk menetapkan dimensi yang berbeda untuk perangkat yang lebih kecil

#my-chart.bar {
  height: 200px;
  max-width: 300px;
  margin: 0 auto;
}

...

Orientasi

Anda dapat mengontrol orientasi bagan, atau arah. Orientasi awal tergantung pada arah penulisan bahasa Anda. Menggunakan kelas

...

_0 Anda dapat membalikkan orientasi

...

Menuju

Anda dapat menambahkan tajuk ke bagan Anda menggunakan tag. Secara default judulnya disembunyikan. Untuk menampilkan tajuk, gunakan kelas

...

_1


  ...

   Descriptive Chart Heading

_

Tajuk Bagan Deskriptif

Buka di. Tajuk Bagan Deskriptif

Beberapa Kumpulan Data

Anda dapat menggunakan satu set data (satu tag di setiap )

Atau banyak set data (banyak tag di )


   Data 
   Data 
   Data

_

Tetapi saat menggunakan beberapa kumpulan data, Anda harus menambahkan kelas

...

2

...

Label

Anda dapat menambahkan label ke data Anda dan mengontrol posisi dan ukuran label. Label ditambahkan menggunakan tag di dalam


   Label 
   Data 
   Data 
   Data

Secara default, label disembunyikan. Untuk menampilkan label, gunakan kelas

...

3

...

Contoh Batang #6YearProgress20162017201820192020

Buka di. Contoh Batang #6YearProgress20162017201820192020

Contoh Batang #7YearProgress20162017201820192020

Buka di. Contoh Batang #7YearProgress20162017201820192020

Beberapa bagan menggunakan label panjang, yang lain menggunakan label pendek. Untuk menyesuaikan ukuran label gunakan variabel

...

4

#my-chart.bar {
  --labels-size: 50px;
}

Contoh Batang #8YearProgress20162017201820192020

Buka di. Contoh Batang #8YearProgress20162017201820192020

Contoh Batang #9YearProgress20162017201820192020

Buka di. Contoh Batang #9YearProgress20162017201820192020

Sumbu

Anda dapat mengontrol sumbu yang akan ditampilkan pada grafik

Sumbu Utama

Untuk menambahkan sumbu utama guna memisahkan label dari bagan itu sendiri, gunakan kelas

...

5

...

Contoh Batang #10YearProgress20162017201820192020

Buka di. Contoh Batang #10YearProgress20162017201820192020

Contoh Batang #11YearProgress20162017201820192020

Buka di. Contoh Batang #11YearProgress20162017201820192020

Sumbu Sekunder

Untuk menambahkan sumbu sekunder, yang terletak di dalam bagan itu sendiri, gunakan kelas

...

6

...

Contoh Batang #12YearProgress20162017201820192020

Buka di. Contoh Batang #12YearProgress20162017201820192020

Contoh Batang #13YearProgress20162017201820192020

Buka di. Contoh Batang #13YearProgress20162017201820192020

Sumbu Data

Untuk menambahkan sumbu data yang dihasilkan secara otomatis berdasarkan jumlah baris (tag) yang Anda miliki. Gunakan kelas

...

_7 untuk menambahkannya

const DATA_COUNT = 7;
const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};
const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [
    {
      label: 'Dataset 1',
      data: Utils.numbers(NUMBER_CFG),
      borderColor: Utils.CHART_COLORS.red,
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
    },
    {
      label: 'Dataset 2',
      data: Utils.numbers(NUMBER_CFG),
      borderColor: Utils.CHART_COLORS.blue,
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
    }
  ]
};

Dokumen

Untuk bagan batang horizontal ini, HTML sedikit berbeda, namun, saya mencoba menggunakan kode CSS Anda untuk Judul dan Label sumbu Y

Sayangnya, Judul dan Label saya tidak berlaku

Inilah yang saya miliki sejauh ini…

<!DOCTYPE HTML>
<html lang="en">

<!-- *************************  HTML HEAD  ********************************* -->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">

  <title>sp_bar-chart-horizontal_v03.html</title>

  <!-- CSS STYLES -->
  <style media="screen">
    /**************************************************************************/
    /* GENERIC                                                                */
    /**************************************************************************/
    *{
      margin: 0;
      padding: 0;
    }
    
    *,
    *:before,
    *:after{
      box-sizing: border-box;
    }

    body{
      font-family: Helvetica, Arial, Sans-Serif;
      font-weight: normal;
      line-height: 1.4em;
      font-size: 0.9em;
      color: #000;
    }

    
    /**************************************************************************/
    /* DESKTOP                                                                */
    /**************************************************************************/
    
    /* FIGURE */
    figure{
      min-width: 200px;
      max-width: 600px;
      margin: 2rem;
      padding: 1.5rem 2rem 2rem;
      border: 1px solid #000;
    }
    
    /* TABLE */
    .barChart_h{
      display: block;
      height: auto;                         /* Do I need this? */
      width: 100%;
      overflow-wrap: break-word;
      border-spacing: 0;
    }
    
    /* CAPTION */
    .barChart_h caption{
      display: block;
      padding: 0 0 1rem 0;
      line-height: 1.1;
      font-size: 1.1rem;
      font-weight: bold;
      text-align: left;
    }
    
    /* TBODY */    
    .barChart_h tbody{
      display: block                        /* All HTML elements have a "display" value assigned by the User-Agent (UA).
                                               Default-values assigned:
                                                  tbody ==> (display: table-row-group)
                                                  tr    ==> (display: table-row)
                                                  td    ==> (display: table-cell)
                                               Assigning (display: block) allows us to turn a table into a horizontal display. */
    }

    .barChart_h tbody:after{                /* For IE9 and under, need to enclose floats.. */
      content: "";
      display: block;
      clear: both;
      height: 0;
    }
    
    /* TH */
    .barChart_h tbody th{
      width: 25%;
      font-weight: normal;
      text-align: right;
    }

    /* TD */
    .barChart_h tbody td{
      border-left: 2px solid #F00;          /* X-AXIS. (vertical) */
      
      border-right: 1px solid #DDD;         /* Finish out repeating vertical-gridlines. */
      
      background-image: linear-gradient(to right, #DDD 1px, transparent 1px);
                                            /* Create black-transparent gradient for 1px, then remainder of gradient is transparent.
                                               This creates the illusion of a 1px vertical-line. */
      background-size: 10% 100%;            /* Go right in 10% increments. */
    }

    /* TH+TD */
    .barChart_h tbody th,
    .barChart_h tbody td{
      padding: 0.5rem 0 0.4rem 0;           /* Space around Bars. */
    }
                                            
    .barChart_h tbody tr.firstRow th,
    .barChart_h tbody tr.firstRow td{
      padding: 1rem 0 0.5rem 0;             /* Add spacing. */
    }
    
    .barChart_h tbody tr.lastRow th,
    .barChart_h tbody tr.lastRow td{
      padding: 0.5rem 0 1rem 0;             /* Add spacing. */
    }
    
    /* BARS */
    .barChart_h tbody td span{
      position: relative;                   /* Needed for absolute-positioning of Bar-value. */
      display: block;                       /* Expands <span> to fill <td> */
      height: 20px;
      background: #99FFFF;
      border-top: 1px solid #000;
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
      box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.3);
    }
    
    /* BAR-VALUES */
    .barChart_h tbody td span b{
      position: absolute;
      left: 100%;
      top: 0;
      right: auto;
      bottom: 0;
      display: block;
      padding: 0 0 0 0.5rem;
    }
        
    /* Y-AXIS TITLE+LABELS */
    .barChart_h tbody th.y-axis{
      display: block;
      width: 100%;
/*      width: calc(100% + 2px);            /* Hide right border. /**/

      display: flex;                        /* Create Flexbox (Flex-Container). */
      padding-bottom: 1.4rem;
      font-weight: bold;
      border-bottom: 2px solid #F00;        /* Y-AXIS. (horizontal) */
      background-color: #FFF;
    }

    
    /* NEED HELP WITH STYLES BELOW.. */

    /* Y-AXIS TITLE */
    .barChart_h tbody .rotate{
      display: block;
    }
/*    
      -ms-writing-mode: initial;
      writing-mode: initial;
      white-space: nowrap;
      transform: none;
      margin: 0;
      line-height: normal;
      font-size: 0.9rem;
    }
/**/

    /* Y-AXIS LABELS */
    .barChart_h tbody th.y-axis ol.segments{
      position: absolute;
      top: auto;
      bottom: 0;
      right: 0;
      left: 0;
      display: flex;                        /* Create Flexbox (Flex-Container). */
      flex-direction: row;
      font-size: 0.9rem;
    }

    .barChart_h tbody ol.segments li{
      flex: 1 0 0;
      text-align: right;
    }

    .barChart_h tbody ol.segments li b{
      display: inline-flex;
      transform: translate(50%, 0%);
    }

    .barChart_h tbody ol.segments li.zero{
      left: 0;
      right: auto;
      bottom: auto;
      top: 0;
    }

    .barChart_h tbody ol.segments li.zero b{
      transform: translate(-50%, 0%);
    }

    /**************************************************************************/
    /* MOBILE                                                                 */
    /**************************************************************************/
    @media screen and (max-width: 414px){
      body{
        font-size: 0.8em;
      }
      
      /* CAPTION */
      .barChart_h caption{
        font-size: 1rem;
      }

      /* FIGURE */
      figure{
        margin: 0;
        padding: 1rem;
      }
      
      /* TD */
      .barChart_h tbody td{
        width: 60%;
      }
    }
        
  </style>
</head>

<!-- *************************  HTML BODY  ********************************* -->
<body>
  <figure>
    <table class="barChart_h">
      <caption>Q1: My waiter provided good service tonight.</caption>

      <tbody>
        <!-- Y-axis -->
        <tr>
          <th class="blankCell"></th>
          <th class="y-axis">
            <div class="rotate">Responses</div>
            <ol class="segments">
              <li><b>100</b></li>
              <li><b>80</b></li>
              <li><b>60</b></li>
              <li><b>40</b></li>
              <li><b>20</b></li>
              <li class="zero"><b>0</b></li>
            </ol>
          </th>
        </tr>
        
        <!-- Data Rows -->
        <tr class="firstRow">
          <th scope="row">Stongly Disagree:</th>
          <td><span style="width:10%"><b>10</b></span></td>
        </tr>
        <tr>
          <th scope="row">Disagree:</th>
          <td><span style="width:30%"><b>30</b></span></td>
        </tr>
        <tr>
          <th scope="row">Neither:</th>
          <td><span style="width:20%"><b>20</b></span></td>
        </tr>
        <tr>
          <th scope="row">Strongly Agree:</th>
          <td><span style="width:70%"><b>70</b></span></td>
        </tr>
        <tr class="lastRow">
          <th scope="row">Strongly Agree:</th>
          <td><span style="width:40%"><b>40</b></span></td>
        </tr>
      </tbody>

    </table>
  </figure>
  
</body>
</html>

Tidak menuntut apa yang saya lakukan salah, tetapi saya berharap Anda dapat membantu saya memperbaiki keadaan

Terima kasih

@PaulOB ,

Terima kasih atas tips di atas

Saya dapat membuat semuanya berfungsi dan cocok dengan contoh Anda, dan di bawah ini adalah kode saya yang diperbarui…

<!DOCTYPE HTML>
<html lang="en">

<!-- *************************  HTML HEAD  ********************************* -->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">

  <title>sp_bar-chart-horizontal_v05.html</title>

  <!-- CSS STYLES -->
  <style media="screen">
    /**************************************************************************/
    /* GENERIC                                                                */
    /**************************************************************************/
    *{
      margin: 0;
      padding: 0;
    }
    
    *,
    *:before,
    *:after{
      box-sizing: border-box;
    }

    body{
      font-family: Helvetica, Arial, Sans-Serif;
      font-weight: normal;
      line-height: 1.4em;
      font-size: 0.9em;
      color: #000;
    }

    
    /**************************************************************************/
    /* DESKTOP                                                                */
    /**************************************************************************/
    
    /* FIGURE */
    figure{
      min-width: 200px;
      max-width: 780px;
/*      max-width: 600px;                     /**/
      margin: 2rem;
      padding: 1.5rem 2rem 2rem;
      border: 1px solid #000;
    }
    
    /* TABLE */
    .barChart_h{
      display: block;
      height: auto;                         /* Do I need this? */
      width: 100%;
      overflow-wrap: break-word;
      border-spacing: 0;
    }
    
    /* CAPTION */
    .barChart_h caption{
      display: block;
      padding: 0 0 1rem 0;
      line-height: 1.1;
      font-size: 1.1rem;
      font-weight: bold;
      text-align: left;
    }
    
    /* TBODY */    
    .barChart_h tbody{
      display: block                        /* All HTML elements have a "display" value assigned by the User-Agent (UA).
                                               Default-values assigned:
                                                  tbody ==> (display: table-row-group)
                                                  tr    ==> (display: table-row)
                                                  td    ==> (display: table-cell)
                                               Assigning (display: block) allows us to turn a table into a horizontal display. */
    }

    .barChart_h tbody:after{                /* For IE9 and under, need to enclose floats.. */
      content: "";
      display: block;
      clear: both;
      height: 0;
    }
    
    /* TH+TD */
    .barChart_h tbody tr.firstRow th,
    .barChart_h tbody tr.firstRow td{
      padding: 1rem 0 0.5rem 0;             /* Add extra vertical padding. */
    }
    
    .barChart_h tbody th,
    .barChart_h tbody td{
      padding: 0.5rem 0 0.4rem 0;           /* Space around Bars. */
    }
                                            
    .barChart_h tbody tr.lastRow th,
    .barChart_h tbody tr.lastRow td{
      padding: 0.5rem 0 1rem 0;             /* Add extra vertical padding. */
    }
    
    /* TH */
    .barChart_h tbody th{
/*      width: 25%;     /**/
      font-weight: normal;
      text-align: right;
    }

    /* TD */
    .barChart_h tbody td{
      border-left: 2px solid #F00;          /* X-AXIS. (vertical) */
      
      border-right: 1px solid #DDD;         /* Finish out repeating vertical-gridlines. */
      
      background-image: linear-gradient(to right, #DDD 1px, transparent 1px);
                                            /* Create grey-transparent gradient for 1px, then remainder of gradient is transparent.
                                               This creates the illusion of a 1px vertical-line. */
      background-size: 10% 100%;            /* Go right in 10% increments. */
    }

    /* BARS */
    .barChart_h tbody td span{
      position: relative;                   /* Needed for absolute-positioning of Bar-value. */
      display: block;                       /* Expands <span> to fill <td> */
      height: 20px;
      background: #99FFFF;                  /* Aqua (default) */
      border-top: 1px solid #000;
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
      box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.3);
    }
    
    /* BAR-VALUES */
    .barChart_h tbody td span b{
      position: absolute;
      left: 100%;
      top: 0;
      right: auto;
      bottom: 0;
      display: block;
      padding: 0 0 0 0.5rem;
      font-weight: normal;
    }

    /* Y-AXIS */
    .barChart_h tbody th.blankCell{
      width: 25%;
    }

    .barChart_h tbody th.y-axis{
      position: relative;                   /* New */
      padding-bottom: 1.4rem;
      border-bottom: 2px solid #F00;        /* Y-AXIS. (horizontal) */
      background-color: #FFF;
    }
    
    /* Y-AXIS TITLE */
    .barChart_h tbody div.y-axis-title{
      display: block;
      text-align: center;
      font-weight: bold;
    }    
    
    /* Y-AXIS LABELS */
    .barChart_h tbody ol.y-axis-labels{
      position: absolute;
      top: auto;
      bottom: 0;
      right: 0;
      left: 0;
      display: flex;                        /* Create Flexbox (Flex-Container). */
      flex-direction: row;
      margin: 0;                            /* New */
      padding: 0;                           /* New */
      list-style: none;                     /* New */
      font-size: 0.9rem;
    }

    .barChart_h tbody ol.y-axis-labels li.zero{
      position: absolute;                   /* Remove 0 from Flexbox flow. */ /* New */
      left: 0;
      right: auto;
      bottom: auto;
      top: 0;
    }

    .barChart_h tbody ol.y-axis-labels li.zero b{
      transform: translate(-50%, 0%);
    }

    .barChart_h tbody ol.y-axis-labels li{
      flex: 1 0 0;
      text-align: right;
    }

    .barChart_h tbody ol.y-axis-labels li b{
      display: inline-flex;
      transform: translate(50%, 0%);
      font-weight: normal;
    }
    
    
    /**************************************************************************/
    /* MOBILE                                                                 */
    /**************************************************************************/
    @media screen and (max-width: 414px){
      body{
        font-size: 0.8em;
      }
      
      /* CAPTION */
      .barChart_h caption{
        font-size: 1rem;
      }

      /* FIGURE */
      figure{
        margin: 0;
        padding: 1rem;
      }
      
      /* TD */
      .barChart_h tbody td{
        width: 60%;
      }
    }
        
  </style>
</head>

<!-- *************************  HTML BODY  ********************************* -->
<body>
  <figure>
    <table class="barChart_h">
      <caption>Q1: My waiter provided good service tonight.</caption>

      <tbody>
        <!-- Y-axis -->
        <tr>
          <th class="blankCell"></th>
          <th class="y-axis">
            <div class="y-axis-title"># of Responses</div>
            <ol class="y-axis-labels">
              <li class="zero"><b>0</b></li>
              <li><b>20</b></li>
              <li><b>40</b></li>
              <li><b>60</b></li>
              <li><b>80</b></li>
              <li><b>100</b></li>
            </ol>
          </th>
        </tr>
        
        <!-- Data Rows -->
        <tr class="firstRow">
          <th scope="row">Stongly Disagree:</th>
          <td><span style="width:10%"><b>10</b></span></td>
        </tr>
        <tr>
          <th scope="row">Disagree:</th>
          <td><span style="width:30%"><b>30</b></span></td>
        </tr>
        <tr>
          <th scope="row">Neither:</th>
          <td><span style="width:20%"><b>20</b></span></td>
        </tr>
        <tr>
          <th scope="row">Strongly Agree:</th>
          <td><span style="width:70%"><b>70</b></span></td>
        </tr>
        <tr class="lastRow">
          <th scope="row">Strongly Agree:</th>
          <td><span style="width:40%"><b>40</b></span></td>
        </tr>
        
      </tbody>

    </table>
  </figure>
  
</body>
</html>

Saya punya beberapa pertanyaan lanjutan…

Q1. ) Mengapa saat saya mengarahkan kursor ke <table> di Firefox Dev Tools, itu diperluas ke lebar penuh <figure>, tetapi saat saya mengarahkan kursor ke <table> <tbody> <tr> dan lebih khusus lagi <table> <tbody> <tr> <th class="y-axis">, sepertinya macet dari segi lebar?

Selanjutnya, jika saya menghapus gaya with: 25%;[code] from [code]<tr> <th class="blankCell"> maka semuanya akan mengerut?

Saya ingin label sumbu X memiliki lebar 25%, sehingga area batang harus memiliki lebar 75%

Q2. ) Apakah saya perlu .barChart_h{ height: auto?

Q3. ) Bolehkah meletakkan sumbu Y di bagian bawah bagan batang seperti yang biasanya Anda lihat, atau lebih baik membiarkannya di atas sehingga pengguna seluler dapat melihat sumbu Y tanpa perlu menggulir ke bawah? . )

Q4. ) Apakah akan lebih benar secara semantik untuk menempatkan sumbu Y di <thead> dan meninggalkan palang di <tbody>?

Terima kasih

UpstateLeafPeeper

Q1. ) Mengapa ketika saya mengarahkan kursor ke <table> di Firefox Dev Tools, itu diperluas ke lebar penuh <figure> , tetapi ketika saya mengarahkan kursor ke <table> <tbody> <tr> dan lebih khusus lagi <table> <tbody> <tr> <th class="y-axis"> , sepertinya macet dari segi lebar?
Selanjutnya, jika saya menghapus gaya with: 25%;[code] from [code]<tr> <th class="blankCell"> maka semuanya akan mengerut?
Saya ingin label sumbu X memiliki lebar 25%, sehingga area batang harus memiliki lebar 75%

Sebagian besar masalah berasal dari fakta bahwa Anda menyetel beberapa komponen tabel untuk ditampilkan. blok dan beberapa dibiarkan default. Itu berarti elemen seperti

<!DOCTYPE HTML>
<html lang="en">

<!-- *************************  HTML HEAD  ********************************* -->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">

  <title>sp_bar-chart-horizontal_v05.html</title>

  <!-- CSS STYLES -->
  <style media="screen">
    /**************************************************************************/
    /* GENERIC                                                                */
    /**************************************************************************/
    *{
      margin: 0;
      padding: 0;
    }
    
    *,
    *:before,
    *:after{
      box-sizing: border-box;
    }

    body{
      font-family: Helvetica, Arial, Sans-Serif;
      font-weight: normal;
      line-height: 1.4em;
      font-size: 0.9em;
      color: #000;
    }

    
    /**************************************************************************/
    /* DESKTOP                                                                */
    /**************************************************************************/
    
    /* FIGURE */
    figure{
      min-width: 200px;
      max-width: 780px;
/*      max-width: 600px;                     /**/
      margin: 2rem;
      padding: 1.5rem 2rem 2rem;
      border: 1px solid #000;
    }
    
    /* TABLE */
    .barChart_h{
      display: block;
      height: auto;                         /* Do I need this? */
      width: 100%;
      overflow-wrap: break-word;
      border-spacing: 0;
    }
    
    /* CAPTION */
    .barChart_h caption{
      display: block;
      padding: 0 0 1rem 0;
      line-height: 1.1;
      font-size: 1.1rem;
      font-weight: bold;
      text-align: left;
    }
    
    /* TBODY */    
    .barChart_h tbody{
      display: block                        /* All HTML elements have a "display" value assigned by the User-Agent (UA).
                                               Default-values assigned:
                                                  tbody ==> (display: table-row-group)
                                                  tr    ==> (display: table-row)
                                                  td    ==> (display: table-cell)
                                               Assigning (display: block) allows us to turn a table into a horizontal display. */
    }

    .barChart_h tbody:after{                /* For IE9 and under, need to enclose floats.. */
      content: "";
      display: block;
      clear: both;
      height: 0;
    }
    
    /* TH+TD */
    .barChart_h tbody tr.firstRow th,
    .barChart_h tbody tr.firstRow td{
      padding: 1rem 0 0.5rem 0;             /* Add extra vertical padding. */
    }
    
    .barChart_h tbody th,
    .barChart_h tbody td{
      padding: 0.5rem 0 0.4rem 0;           /* Space around Bars. */
    }
                                            
    .barChart_h tbody tr.lastRow th,
    .barChart_h tbody tr.lastRow td{
      padding: 0.5rem 0 1rem 0;             /* Add extra vertical padding. */
    }
    
    /* TH */
    .barChart_h tbody th{
/*      width: 25%;     /**/
      font-weight: normal;
      text-align: right;
    }

    /* TD */
    .barChart_h tbody td{
      border-left: 2px solid #F00;          /* X-AXIS. (vertical) */
      
      border-right: 1px solid #DDD;         /* Finish out repeating vertical-gridlines. */
      
      background-image: linear-gradient(to right, #DDD 1px, transparent 1px);
                                            /* Create grey-transparent gradient for 1px, then remainder of gradient is transparent.
                                               This creates the illusion of a 1px vertical-line. */
      background-size: 10% 100%;            /* Go right in 10% increments. */
    }

    /* BARS */
    .barChart_h tbody td span{
      position: relative;                   /* Needed for absolute-positioning of Bar-value. */
      display: block;                       /* Expands <span> to fill <td> */
      height: 20px;
      background: #99FFFF;                  /* Aqua (default) */
      border-top: 1px solid #000;
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
      box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.3);
    }
    
    /* BAR-VALUES */
    .barChart_h tbody td span b{
      position: absolute;
      left: 100%;
      top: 0;
      right: auto;
      bottom: 0;
      display: block;
      padding: 0 0 0 0.5rem;
      font-weight: normal;
    }

    /* Y-AXIS */
    .barChart_h tbody th.blankCell{
      width: 25%;
    }

    .barChart_h tbody th.y-axis{
      position: relative;                   /* New */
      padding-bottom: 1.4rem;
      border-bottom: 2px solid #F00;        /* Y-AXIS. (horizontal) */
      background-color: #FFF;
    }
    
    /* Y-AXIS TITLE */
    .barChart_h tbody div.y-axis-title{
      display: block;
      text-align: center;
      font-weight: bold;
    }    
    
    /* Y-AXIS LABELS */
    .barChart_h tbody ol.y-axis-labels{
      position: absolute;
      top: auto;
      bottom: 0;
      right: 0;
      left: 0;
      display: flex;                        /* Create Flexbox (Flex-Container). */
      flex-direction: row;
      margin: 0;                            /* New */
      padding: 0;                           /* New */
      list-style: none;                     /* New */
      font-size: 0.9rem;
    }

    .barChart_h tbody ol.y-axis-labels li.zero{
      position: absolute;                   /* Remove 0 from Flexbox flow. */ /* New */
      left: 0;
      right: auto;
      bottom: auto;
      top: 0;
    }

    .barChart_h tbody ol.y-axis-labels li.zero b{
      transform: translate(-50%, 0%);
    }

    .barChart_h tbody ol.y-axis-labels li{
      flex: 1 0 0;
      text-align: right;
    }

    .barChart_h tbody ol.y-axis-labels li b{
      display: inline-flex;
      transform: translate(50%, 0%);
      font-weight: normal;
    }
    
    
    /**************************************************************************/
    /* MOBILE                                                                 */
    /**************************************************************************/
    @media screen and (max-width: 414px){
      body{
        font-size: 0.8em;
      }
      
      /* CAPTION */
      .barChart_h caption{
        font-size: 1rem;
      }

      /* FIGURE */
      figure{
        margin: 0;
        padding: 1rem;
      }
      
      /* TD */
      .barChart_h tbody td{
        width: 60%;
      }
    }
        
  </style>
</head>

<!-- *************************  HTML BODY  ********************************* -->
<body>
  <figure>
    <table class="barChart_h">
      <caption>Q1: My waiter provided good service tonight.</caption>

      <tbody>
        <!-- Y-axis -->
        <tr>
          <th class="blankCell"></th>
          <th class="y-axis">
            <div class="y-axis-title"># of Responses</div>
            <ol class="y-axis-labels">
              <li class="zero"><b>0</b></li>
              <li><b>20</b></li>
              <li><b>40</b></li>
              <li><b>60</b></li>
              <li><b>80</b></li>
              <li><b>100</b></li>
            </ol>
          </th>
        </tr>
        
        <!-- Data Rows -->
        <tr class="firstRow">
          <th scope="row">Stongly Disagree:</th>
          <td><span style="width:10%"><b>10</b></span></td>
        </tr>
        <tr>
          <th scope="row">Disagree:</th>
          <td><span style="width:30%"><b>30</b></span></td>
        </tr>
        <tr>
          <th scope="row">Neither:</th>
          <td><span style="width:20%"><b>20</b></span></td>
        </tr>
        <tr>
          <th scope="row">Strongly Agree:</th>
          <td><span style="width:70%"><b>70</b></span></td>
        </tr>
        <tr class="lastRow">
          <th scope="row">Strongly Agree:</th>
          <td><span style="width:40%"><b>40</b></span></td>
        </tr>
        
      </tbody>

    </table>
  </figure>
  
</body>
</html>

_5 masih ditampilkan. tabel-baris dan secara efektif menjadi tabel anonim dan tabel secara default menyusut agar pas dan hanya memiliki lebar konten. Itu sebabnya ketika Anda menghapus lebar itu, elemen akan mengerut

Seperti yang saya sebutkan di utas sebelumnya bahwa untuk bagan vertikal seperti ini dengan dua sel, Anda tidak memerlukan semua tipu daya yang digunakan untuk mengubah bagan horizontal menjadi bagan vertikal. Untuk 'kasus penggunaan' ini, Anda dapat menggunakan perilaku tabel standar karena Anda hanya memiliki dua sel horizontal dan komponen tabel dapat tetap persis seperti yang dirancang

Saya dengan cepat menghapus semua blok tampilan dari kode Anda sehingga kami mendapatkan tampilan tabel alami dan ditempelkan ke dalam pena kode ini

Elemen-elemen sekarang berperilaku alami dan mengambil lebar penuh dari induknya. Saya menambahkan beberapa komentar dalam kode tetapi tidak mendokumentasikan sepenuhnya karena saya kekurangan waktu hari ini

UpstateLeafPeeper

Q4. ) Apakah akan lebih benar secara semantik untuk menempatkan sumbu Y di <thead> dan meninggalkan palang di <tbody> ?

Ini jelas terlihat seperti baris tajuk bagi saya karena mendefinisikan konten vertikal di bawah. Semantik tabel bisa sulit dicapai atau dipahami saat melakukan tata letak yang kompleks. Hal utama yang harus ditanyakan adalah apakah tajuk kolom ini merujuk ke seluruh kolom di bawahnya. Jika demikian maka itu jelas merupakan tajuk tabel

Bagaimana cara membuat grafik batang horizontal di CSS?

2019

.

2018

Bagaimana cara menambahkan bilah horizontal di HTML?

Tag

tag mendefinisikan jeda tematik di halaman HTML (mis. g. pergeseran topik). Elemen

Bagaimana Anda membuat grafik batang di HTML CSS?

#1 Diagram Batang HTML - Hanya Menggunakan HTML dan CSS .

Bagan Batang HTML

Contoh Bagan Batang HTML. Hanya Menggunakan HTML Dan CSS

Bagaimana Anda memplot grafik batang horizontal?

Ini adalah grafik yang batangnya digambar secara horizontal. Kategori data ditampilkan pada sumbu vertikal dan nilai data ditampilkan pada sumbu horizontal . Panjang setiap bilah sama dengan nilai yang sesuai dengan kategori data dan semua bilah melintang dari kiri ke kanan.

kode html