Đặt chiều rộng và chiều cao

Tôi đang thử mã ví dụ cho Chart.js được cung cấp trong tài liệu .

Chiều rộng và chiều cao được chỉ định nội tuyến trên phần tử canvas ở 400px / 400px.

Nhưng khi kết xuất biểu đồ, nó sẽ bị bung ra hết chiều rộng trang và cắt bỏ phần cuối bên phải.

Xem ví dụ

Tôi phải kiểm soát chiều rộng / chiều cao của biểu đồ bằng cách nào / ở đâu?

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

Bạn có thể ghi đè chiều rộng kiểu canvas! Quan trọng ...

canvas{

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

}

cũng thế

chỉ định responsive:true,thuộc tính trong các tùy chọn ..

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

cập nhật theo các tùy chọn được thêm vào: maintainAspectRatio: false,

liên kết: http://codepen.io/theConstructor/pen/KMpqvo

Bạn cũng có thể chỉ cần bao quanh biểu đồ bằng vùng chứa (theo tài liệu chính thức 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
}

và với các tùy chọn

responsive:true
maintainAspectRatio: false

Trong trường hợp của tôi, việc chuyển responsive: falsetheo các tùy chọn đã giải quyết được vấn đề. Tôi không chắc tại sao mọi người lại bảo bạn làm điều ngược lại, đặc biệt là vì true là mặc định.

Cũng làm việc cho tôi

responsive:true
maintainAspectRatio: false


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

Cảm ơn bạn

Tôi không thể tin rằng không ai nói về việc sử dụng một phần tử cha tương đối.

Mã:

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

Nguồn: Tài liệu chính thức

Không được đề cập ở trên nhưng sử dụng max-widthhoặc max-heighttrên phần tử canvas cũng là một khả năng.

Phần dưới đây phù hợp với tôi - nhưng đừng quên đặt điều này trong tham số "tùy chọn".

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

Điều này đã giúp trong trường hợp của tôi:

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

Sử dụng cái này, nó hoạt động tốt.

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

trở xuống options,

responsive:true,