แสดงแผนภูมิโต้ตอบหลายรายการในหน้าเดียวกันโดยใช้ Chart.js

ฉันต้องแสดงแผนภูมิสี่แผนภูมิในหน้าเดียวกัน เพื่อให้แผนภูมิเหล่านั้นตอบสนองโดยจะเปลี่ยนขนาดเมื่อมีการปรับขนาดหน้า ฉันใช้

<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>

และในแต่ละผืนผ้าใบ ฉันแนบแผนภูมิพร้อมตัวเลือกการตอบสนอง: จริง แต่ผลลัพธ์ไม่ตอบสนอง ถ้าฉันใช้แคนวาสนอกโต๊ะ มันจะทำงานได้อย่างถูกต้อง ฉันจะทำอย่างไร?


javascript canvas chart.js responsive
person eug100    schedule 01.03.2017    source แหล่งที่มา

คำตอบ (1)


arrow_upward
1
arrow_downward

คุณควรละทิ้งการใช้ตารางและใช้ DIV แทน

นี่คือตัวอย่างการใช้ตารางตอบสนอง 2x2 โดยที่ DIV แต่ละตัวมี canvas ของคุณ CSS ที่ใช้ถูกนำมาจาก คำตอบ และแก้ไขเป็น 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>

และ CSS:

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;
}

หมายเหตุ ให้ลบคุณสมบัติ section div height เมื่อคุณสร้างอินสแตนซ์แผนภูมิ Chart.js ของคุณ ตัวอย่างนี้เพิ่มความสูงเพื่อแสดงตารางที่ใช้งานจริง

นี่คือตัวอย่างการทำงานของโค้ดด้านบน

person jordanwillis    schedule 01.03.2017
comment
ขอบคุณมาก @jordanwillis มันมีประโยชน์จริงๆ! - person eug100; 01.03.2017
comment
@ eug100 อย่าลืมยอมรับคำตอบถ้าคุณพอใจกับมัน :) - person jordanwillis; 01.03.2017