การตั้งค่าความกว้างและความสูง

ฉันพยายามออกโค้ดตัวอย่างสำหรับ Chart.js ที่กำหนดไว้ในเอกสาร

ความกว้างและความสูงถูกระบุแบบอินไลน์บนองค์ประกอบผ้าใบที่ 400px / 400px

แต่เมื่อแสดงผลแผนภูมิจะเต็มความกว้างเต็มหน้าและตัดปลายด้านขวาสุดออกไป

ดูตัวอย่าง

ฉันควรควบคุมความกว้าง / ความสูงของแผนภูมิอย่างไร / ที่ไหน

This is some bogus text because SO prohibits linking to Codepen otherwise.

คุณสามารถแทนที่ความกว้างสไตล์ผ้าใบได้! สำคัญ ...

canvas{

  width:1000px !important;
  height:600px !important;

}

ด้วย

ระบุresponsive:true,คุณสมบัติภายใต้ตัวเลือก ..

options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}

อัปเดตภายใต้ตัวเลือกที่เพิ่ม: maintainAspectRatio: false,

ลิงค์: http://codepen.io/theConstructor/pen/KMpqvo

คุณยังสามารถล้อมรอบแผนภูมิด้วยคอนเทนเนอร์ (อ้างอิงจากเอกสารอย่างเป็นทางการhttp://www.chartjs.org/docs/latest/general/responsive.html#important-note )

<div class="chart-container">
    <canvas id="myCanvas"></canvas>
</div>

CSS

.chart-container {
    width: 1000px;
    height:600px
}

และมีตัวเลือก

responsive:true
maintainAspectRatio: false

ในกรณีของฉันการผ่านresponsive: falseตัวเลือกต่างๆช่วยแก้ปัญหาได้ ฉันไม่แน่ใจว่าทำไมทุกคนถึงบอกให้คุณทำสิ่งที่ตรงกันข้ามโดยเฉพาะอย่างยิ่งเนื่องจาก true เป็นค่าเริ่มต้น

ใช้ได้ผลกับฉันด้วย

responsive:true
maintainAspectRatio: false


<div class="row">
        <div class="col-xs-12">
            <canvas id="mycanvas" width="500" height="300"></canvas>
        </div>
    </div>

ขอขอบคุณ

ฉันไม่อยากเชื่อเลยว่าไม่มีใครพูดถึงการใช้องค์ประกอบแม่แบบสัมพัทธ์

รหัส:

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
  <canvas id="chart"></canvas>
</div>

แหล่งที่มา: เอกสารอย่างเป็นทางการ

คุณสามารถเปลี่ยนได้aspectRatioตามความต้องการของคุณ:

options:{
     aspectRatio:4 //(width/height)
}

ไม่ได้กล่าวถึงข้างต้น แต่การใช้max-widthหรือmax-heightบนองค์ประกอบผ้าใบก็เป็นไปได้เช่นกัน

ด้านล่างใช้ได้ผลสำหรับฉัน แต่อย่าลืมใส่สิ่งนี้ในพารามิเตอร์ "ตัวเลือก"

var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
    maintainAspectRatio: false,
    responsive:true,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});

สิ่งนี้ช่วยในกรณีของฉัน:

options: {
    responsive: true,
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                min:0,
                max:100
            }
        }]
    }
}

ใช้ตัวนี้ก็ใช้ได้ดี

<canvas id="totalschart" style="height:400px;width: content-box;"></canvas>

และอยู่ภายใต้options,

responsive:true,