Tại sao canvas chart.js không tôn trọng phần đệm của phần tử vùng chứa?

Question

Tôi đang sử dụng Chart.js với biểu đồ dạng đường đơn giản nhưng các thuộc tính chiều rộng và chiều cao được tính toán bởi Chart.js dường như dựa trên tổng chiều rộng và chiều cao của phần tử gốc bỏ qua phần đệm.

var options = { 
 
    maintainAspectRatio: false, 
 
    responsive: true 
 
}; 
 

 
var data = { 
 
    labels: ["", "", "", "", "", "", ""], 
 
    datasets: [ 
 
     { 
 
      label: "My First dataset", 
 
      fillColor: "rgba(220,220,220,0.2)", 
 
      strokeColor: "rgba(220,220,220,1)", 
 
      pointColor: "rgba(220,220,220,1)", 
 
      pointStrokeColor: "#fff", 
 
      pointHighlightFill: "#fff", 
 
      pointHighlightStroke: "rgba(220,220,220,1)", 
 
      data: [65, 59, 80, 81, 56, 55, 40] 
 
     }, 
 
     { 
 
      label: "My Second dataset", 
 
      fillColor: "rgba(151,187,205,0.2)", 
 
      strokeColor: "rgba(151,187,205,1)", 
 
      pointColor: "rgba(151,187,205,1)", 
 
      pointStrokeColor: "#fff", 
 
      pointHighlightFill: "#fff", 
 
      pointHighlightStroke: "rgba(151,187,205,1)", 
 
      data: [28, 48, 40, 19, 86, 27, 90] 
 
     } 
 
    ] 
 
}; 
 

 
var ctx1 = document.getElementById("mychart1").getContext("2d"); 
 
var myNewChart = new Chart(ctx1).Line(data, options);

.container { 
 
    padding: 15px 15px 15px 15px; 
 
    width: 300px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
} 
 

 
.child { 
 
    display: inline-block; 
 
    border: 1px solid red; 
 
    width:100%; 
 
    height:100%; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script> 
 

 

 
<div class='container'> 
 
    <canvas id='mychart1' class='child'></canvas> 
 
</div> 
 
<br> 
 
<div class='container'> 
 
    <div class='child'>test</div> 
 
</div>

JSFiddle

container thứ hai và đứa trẻ thể hiện hành vi của tôi đang mong đợi. Đây có phải là lỗi về cách Chart.js tính toán chiều rộng và chiều cao của canvas hoặc tôi có mắc lỗi về kiểu dáng không?

Answer 1

Tôi cũng cần một người vải đáp ứng và có vấn đề này. Đây là sửa chữa của tôi:

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

Kể từ Chart.js quy mô vải với độ rộng của các container, bỏ qua đệm, tôi chỉ quấn vải trong một div. Các cân đối div với vùng chứa có đệm, tôn trọng phần đệm và sau đó cân đối Chart.js canvas tỷ lệ với số div.

Answer 2

Trong ví dụ jsfiddle của bạn thay đổi thuộc tính responsive false:

var options = { 
    maintainAspectRatio: true, 
    responsive: false 
}; 

Các cài đặt trước đó thêm một 30px bổ sung cho cả chiều cao và chiều rộng khi bạn kiểm tra các yếu tố sử dụng công cụ dev Chrome. Do kích thước của canvas nên không có vấn đề gì khi nói đến việc thay đổi kích cỡ khung hình.

JSFIDDLE EXAMPLE

Answer 3

"Nếu ví dụ, bạn muốn tất cả các bảng xếp hạng tạo ra để được đáp ứng, và thay đổi kích thước khi cửa sổ trình duyệt thực hiện, các thiết lập sau đây có thể được thay đổi:"

Chart.defaults.global.responsive = true;

"Bây giờ, mỗi khi chúng ta tạo ra biểu đồ, options.responsive sẽ là đúng. "

Nguồn: http://www.chartjs.org/docs/

Answer 4

Một giải pháp tốt hơn là sử dụng .container {box-sizing: border-box;}

Answer 5

tôi quá googled cho vấn đề này và đã kết thúc với một giải pháp đơn giản.

Tôi đã thêm height để nó tự động điều chỉnh chiều rộng cho phù hợp và hiển thị theo cách đẹp hơn. Nếu bạn thực sự muốn bạn cũng có thể thêm width. Phần tử canvas là một phần của HTML5.

Nó không cho phép bạn nhập các giá trị với px. Vì vậy, bỏ qua đó và chỉ cần gõ tha số giá trị u cần.

<canvas id="myChart" height="80"></canvas> 

Answer 6

Tôi đã bao gồm và sau đó sử dụng CSS này.

.chart-container { 
    box-sizing:border-box; 
    margin:2%; 
    width:96%; 
} 

Điều này giúp nó được đệm từ các cạnh và đáp ứng. Tôi đã sử dụng 2% nhưng bạn có thể sử dụng bất kỳ tỷ lệ phần trăm nào phù hợp với bố cục của bạn.