Biểu đồ Charts.js không mở rộng kích thước canvas

Question

Tôi đang cố gắng tạo biểu đồ bằng Charts.js (ví dụ hiện tại chỉ là một ví dụ đơn giản mà tôi đang cố gắng làm việc, phần nào lấy từ tài liệu Chart.js) và biểu đồ không thu nhỏ kích thước của canvas mà tôi đang cung cấp. Đây là tất cả các mã có liên quan.

Để import nó:

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

Sau đó, tôi kết nối nó vào một tập tin javascript như sau:

<script type="text/javascript" src="js/stats_tab.js"></script> 

Tôi đã canvas tôi thiết lập:

 <div id="graph_2015" class ="stats_box"> 
      <h4>Graph 2015</h4> 
      Text 
      <canvas id="myChart" width="200" height="200"></canvas> 
     </div> 

Và sau đó cuối cùng trong stats_tab.js, tôi có mã sau:

window.onload=function(){ 
    var ctx = document.getElementById("myChart").getContext("2d"); 
    var myChart = new Chart(ctx, { 
     type: 'line', 
     data: { 
      labels: [1,2,3,4,5,6,7,8,9,10], 
      datasets: [ 
       { 
        label: "My First dataset", 
        data: [1,2,3,2,1,2,3,4,5,4] 
       } 
      ] 
     }, 
     options: { 
     } 
    }); 
} 

Biểu đồ hiển thị độc đáo, nhưng từ chối chia tỷ lệ cho kích thước của canvas tôi đã cung cấp. Cũng không có css nào liên quan đến bất kỳ div nào liên quan. Tính năng kiểm tra trên chrome cho tôi biết rằng biểu đồ cuối cùng là 676 x 676 thay vì 200 x 200 tôi đã chỉ định. Không thực sự chắc chắn những gì đang xảy ra.

Cảm ơn!

Answer 1

This sẽ hoạt động. Về cơ bản, chỉ cần thêm chiều rộng và chiều cao tính đến javascript của bạn:

var ctx = document.getElementById("myChart").getContext("2d"); 
ctx.canvas.width = 200; 
ctx.canvas.height = 200; 
var myChart = new Chart(ctx,......... 

tham khảo: Chart.js canvas resize

Answer 2

Chiều rộng và sở hữu chiều cao mà bạn đã đặt cho bức tranh chỉ có tác dụng nếu chế độ đáp ứng của Chartjs là sai (mà đúng theo mặc định). Thay đổi stats_tab.js của bạn thành nó và nó sẽ hoạt động.

window.onload=function(){ 
     var ctx = document.getElementById("myChart").getContext("2d"); 
     var myChart = new Chart(ctx, { 
      type: 'line', 
      data: { 
       labels: [1,2,3,4,5,6,7,8,9,10], 
       datasets: [ 
        { 
         label: "My First dataset", 
         data: [1,2,3,2,1,2,3,4,5,4] 
        } 
       ] 
      }, 
      options: { 
       responsive: false 
      } 
     }); 
    } 

Answer 3

Điều quan trọng là: width và height thuộc tính không phải là kích thước trong px nhưng tỷ lệ.

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

Trong ví dụ này, tỷ lệ 1: 1. Vì vậy, nếu contenair html của bạn là 676 px chiều rộng thì biểu đồ của bạn sẽ là 676 * 675px
Điều đó có thể giải thích một số lỗi phổ biến.

Bạn có thể tắt tính năng này bằng cách đặt maintainAspectRatio thành sai.