กำหนดความสูงของแผนภูมิใน Chart.js

ฉันต้องการวาดแผนภูมิแท่งแนวนอนด้วย Chart.js แต่มันยังคงปรับขนาดแผนภูมิแทนการใช้ความสูงที่ฉันกำหนดรูปแบบผืนผ้าใบจากสคริปต์

มีวิธีใดในการกำหนดความสูงของกราฟจากสคริปต์หรือไม่?

ดูซอ: Jsfidle

HTML

<div class="graph">
  <div class="chart-legend">

  </div>
  <div class="chart">
    <canvas id="myChart"></canvas>
  </div>
</div>

JavaScript

var ctx = $('#myChart');

ctx.height(500);

var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    maintainAspectRatio: false,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

ดูเหมือนว่าvar ctx = $('#myChart');กำลังส่งคืนรายการองค์ประกอบ คุณจะต้องอ้างอิงก่อนโดยใช้ctx[0]. ความสูงยังเป็นคุณสมบัติไม่ใช่ฟังก์ชัน

ฉันทำแบบนี้ในรหัสของฉัน:

var ctx = document.getElementById("myChart");
ctx.height = 500;

หากคุณปิดใช้งานคงอัตราส่วนในตัวเลือกจะใช้ความสูงที่มี:

var chart = new Chart('blabla', {
                type: 'bar',
                data: {
                },
                options: {
                    maintainAspectRatio: false,
                }
            });

วิธีที่ง่ายที่สุดคือสร้างคอนเทนเนอร์สำหรับผืนผ้าใบและตั้งค่าความสูง:

<div style="height: 300px">
  <canvas id="chart"></canvas>
</div>

และตั้งค่า

options: {  
    responsive: true,
    maintainAspectRatio: false
}

คุณสามารถรวมองค์ประกอบผืนผ้าใบของคุณใน div หลักในตำแหน่งที่ค่อนข้างสูงจากนั้นกำหนดความสูงที่คุณต้องการโดยตั้งค่า maintenanceAspectRatio: false ในตัวเลือก

//HTML
<div id="canvasWrapper" style="position: relative; height: 80vh/500px/whatever">
<canvas id="chart"></canvas>
</div>

<script>
new Chart(somechart, {
options: {
    responsive: true,
    maintainAspectRatio: false

/*, your other options*/

}
});
</script>

อันนี้ใช้ได้กับฉัน:

ฉันตั้งค่าความสูงจาก HTML

canvas#scoreLineToAll.ct-chart.tab-pane.active[height="200"]
canvas#scoreLineTo3Months.ct-chart.tab-pane[height="200"]
canvas#scoreLineToYear.ct-chart.tab-pane[height="200"]

จากนั้นฉันก็ปิดการใช้งานเพื่อรักษาอัตราส่วน

options: {
  responsive: true,
  maintainAspectRatio: false,

เขาพูดถูก. หากคุณต้องการอยู่กับ jQuery คุณสามารถทำได้

var ctx = $('#myChart')[0];
ctx.height = 500;

หรือ

var ctx = $('#myChart');
ctx.attr('height',500);

ตั้งค่าคุณสมบัติ sideRatio ของแผนภูมิเป็น 0 ได้เคล็ดลับสำหรับฉัน ...

    var ctx = $('#myChart');

    ctx.height(500);

    var myChart = new Chart(ctx, {
        type: 'horizontalBar',
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        maintainAspectRatio: false,
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });
myChart.aspectRatio = 0;

คุณควรใช้แอตทริบิวต์ความสูง html สำหรับองค์ประกอบ canvas ดังนี้:

<div class="chart">
    <canvas id="myChart" height="100"></canvas>
</div>

ฉันสร้างคอนเทนเนอร์และตั้งค่าความสูงที่ต้องการของพอร์ตมุมมอง (ขึ้นอยู่กับจำนวนแผนภูมิหรือขนาดเฉพาะของแผนภูมิ):

.graph-container {
width: 100%;
height: 30vh;
}

ในการปรับขนาดหน้าจอแบบไดนามิกฉันตั้งค่าคอนเทนเนอร์ดังนี้:

*Small media devices specific styles*/
@media screen and (max-width: 800px) {
.graph-container {
        display: block;
        float: none;
        width: 100%;
        margin-top: 0px;
        margin-right:0px;
        margin-left:0px;
        height: auto;
    }
}

แน่นอนว่าสำคัญมาก (ตามที่มีการอ้างถึงหลายครั้ง) ตั้งค่าoptionคุณสมบัติต่อไปนี้ของแผนภูมิของคุณ:

options:{
    maintainAspectRatio: false,
    responsive: true,
}

คุณยังสามารถกำหนดขนาดเป็นผืนผ้าใบ

<canvas id="myChart" width="400" height="400"></canvas>

จากนั้นตั้งค่าตัวเลือกตอบสนองเป็นเท็จเพื่อรักษาแผนภูมิตามขนาดที่ระบุไว้เสมอ

options: {
    responsive: false,
}

ต้องการแผนภูมิเพื่อเติมองค์ประกอบหลัก 100% แทนที่จะตั้งค่าความสูงด้วยตนเองและปัญหาคือบังคับให้ div ระดับบนสุดเติมช่องว่างที่เหลืออยู่เสมอ

หลังจากตั้งค่าตัวเลือกที่ตอบสนองและอัตราส่วนแล้ว (ตรวจสอบเอกสาร chartjsที่เกี่ยวข้อง ) css ต่อไปนี้ทำเคล็ดลับ:

HTML

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

SCSS:

.panel {
  display: flex;

  .chart-container {
    position: relative;
    flex-grow: 1;
    min-height: 0;
  }
}

เพียงเพื่อเพิ่มคำตอบที่ได้รับจาก@numediaweb

ในกรณีที่คุณเอาหัวพิงกำแพงเพราะหลังจากทำตามคำแนะนำในการตั้งค่าmaintainAspectRatio=false: เดิมทีฉันคัดลอกโค้ดของฉันจากตัวอย่างที่ฉันได้รับบนเว็บไซต์โดยใช้ Chart.js กับ Angular 2+:

        <div style="display: block">
          <canvas baseChart
                  [datasets]="chartData"
                  [labels]="chartLabels"
                  [options]="chartOptions"
                  [legend]="chartLegend"
                  [colors]="chartColors"
                  [chartType]="chartType">
          </canvas>
        </div>

เพื่อให้ทำงานได้อย่างถูกต้องคุณต้องลบสิ่งที่ฝัง (และไม่จำเป็น) ออกstyle="display: block" แทนกำหนดคลาสสำหรับ div ที่ล้อมรอบและกำหนดความสูงใน CSS

เมื่อคุณทำเช่นนั้นแผนภูมิควรมีความกว้างที่ตอบสนอง แต่ความสูงคงที่