tampilkan beberapa bagan responsif di halaman yang sama menggunakan chart.js

Saya perlu menampilkan empat grafik di halaman yang sama sehingga responsif terhadap perubahan ukurannya saat halaman diubah ukurannya. saya menggunakan

<script src="js/Chart.bundle.js">   </script>
  <div id="container" style="width: 100%;text-align:center">       
    <table width="90%">
        <tr>
            <td colspan="2" id="tdTitle" >
                Title
            </td>
        </tr>
        <tr>
            <td id="tdLeftTop" width="50%" >                   
                 <canvas id="canvasLeftTop"></canvas>

            </td>
            <td id="tdRightTop" width="50%">
                <canvas id="canvasRightTop"></canvas>
            </td>
        </tr>
          <tr>
            <td id="tdLeftBottom" width="50%">
                 <canvas id="canvasLeftBottom"></canvas>
            </td>
            <td id="tdRightBottom" width="50%">
                <canvas id="canvasRightBottom"></canvas>
            </td>
        </tr>
    </table>
   </div>

dan ke setiap kanvas saya lampirkan bagan dengan opsi responsive: true. Namun hasilnya tidak responsif. Jika saya menggunakan kanvas di luar tabel, itu berfungsi dengan benar. Apa yang bisa saya lakukan?


javascript canvas chart.js responsive
person eug100    schedule 01.03.2017    source sumber

Jawaban (1)


arrow_upward
1
arrow_downward

Anda harus meninggalkan penggunaan tabel dan menggunakan DIV sebagai gantinya.

Berikut adalah contoh penggunaan grid 2x2 responsif di mana setiap DIV berisi canvas Anda. Css yang digunakan diambil dari jawaban dan dimodifikasi untuk 2x2.

<div class="w">
  <section>
    <div>
      <canvas id="canvasLeftTop"></canvas>
    </div>
    <div>
      <canvas id="canvasRightTop"></canvas>
    </div>
    <div>
      <canvas id="canvasLeftBottom"></canvas>
    </div>
    <div>
      <canvas id="canvasRightBottom"></canvas>
    </div>
  </section>
</div>

Dan cssnya:

html, body {
  margin:0;
}
.w{
  overflow:hidden;
}
section div {
  float: left;
  height: 24vw;
  margin: 1%;
  width: 46%;
  border-style: solid;
  border-width: 1px;
}
section {
  margin:-1%;
  padding:20px;
}

Catatan, hapus properti section div height setelah Anda membuat instance grafik Chart.js. Ketinggiannya hanya ditambahkan dalam contoh ini untuk menunjukkan aksi grid.

Berikut adalah contoh kerja dari kode di atas.

person jordanwillis    schedule 01.03.2017
comment
Terima kasih banyak @jordanwillis, sangat membantu! - person eug100; 01.03.2017
comment
@eug100 Jangan lupa menerima jawabannya jika Anda senang :) - person jordanwillis; 01.03.2017