Đặt chiều cao của biểu đồ trong Chart.js

Tôi muốn vẽ biểu đồ thanh ngang bằng Chart.js nhưng nó tiếp tục mở rộng biểu đồ thay vì sử dụng chiều cao tôi gán cho biểu mẫu canvas theo kịch bản.

Có cách nào để thiết lập chiều cao của biểu đồ từ tập lệnh không?

Xem fiddle: 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
                }
            }]
        }
    }
});

Có vẻ như var ctx = $('#myChart');là trả về một danh sách các yếu tố. Bạn sẽ cần phải tham khảo đầu tiên bằng cách sử dụng ctx[0]. Ngoài ra chiều cao là một tài sản, không phải là một chức năng.

Tôi đã làm theo cách này trong mã của tôi:

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

Nếu bạn tắt tỷ lệ khung hình duy trì trong các tùy chọn thì nó sẽ sử dụng chiều cao có sẵn:

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

Cách dễ nhất là tạo một thùng chứa cho khung vẽ và đặt chiều cao của nó:

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

và thiết lập

options: {  
    responsive: true,
    maintainAspectRatio: false
}

Bạn có thể bọc phần tử canvas của mình trong div cha, tương đối được định vị, sau đó cung cấp cho div đó chiều cao bạn muốn, đặt duy trìAspectRatio: false trong các tùy chọn của bạn

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

Cái này làm việc cho tôi:

Tôi đặt chiều cao từ 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"]

Sau đó, tôi vô hiệu hóa để duy trì tỷ lệ khung hình

options: {
  responsive: true,
  maintainAspectRatio: false,

Anh ấy đúng. Nếu bạn muốn ở lại với jQuery, bạn có thể làm điều này

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

hoặc là

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

Đặt thuộc tính facRatio của biểu đồ thành 0 đã giúp tôi ...

    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;

Bạn nên sử dụng thuộc tính chiều cao html cho phần tử canvas như:

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

Tôi đã tạo một thùng chứa và đặt chiều cao mong muốn của cổng xem (tùy thuộc vào số lượng biểu đồ hoặc kích thước cụ thể của biểu đồ):

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

Để linh hoạt với kích thước màn hình, tôi đặt bộ chứa như sau:

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

Tất nhiên rất quan trọng (như đã được đề cập đến nhiều lần), thiết lập các optionthuộc tính sau của biểu đồ của bạn:

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

Bạn cũng có thể đặt kích thước cho khung vẽ

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

Và sau đó đặt các tùy chọn đáp ứng thành false để luôn duy trì biểu đồ ở kích thước được chỉ định.

options: {
    responsive: false,
}

Cần biểu đồ để lấp đầy phần tử cha 100%, thay vì đặt chiều cao theo cách thủ công và vấn đề là buộc div cha luôn luôn lấp đầy không gian còn lại.

Sau khi thiết lập các tùy chọn đáp ứng và tỷ lệ (kiểm tra tài liệu chartjs có liên quan ), css sau đây đã thực hiện thủ thuật:

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

Chỉ cần thêm vào câu trả lời được đưa ra bởi @numediaweb

Trong trường hợp bạn đập đầu vào tường vì sau khi làm theo các hướng dẫn cần đặt maintainAspectRatio=false: Ban đầu tôi đã sao chép mã của mình từ một ví dụ tôi có trên một trang web về việc sử dụng Chart.js với Angular 2+:

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

Để làm cho công việc này chính xác, bạn phải xóa phần nhúng (và không cần thiết) style="display: block" Thay vào đó, hãy xác định một lớp cho div kèm theo và xác định chiều cao của nó trong CSS.

Khi bạn làm điều đó, biểu đồ sẽ có chiều rộng đáp ứng nhưng chiều cao cố định.