Vải đệm Chart.js

Question

Tôi đang sử dụng thư viện chart.js mới nhất để tạo biểu đồ dạng đường không có vảy, nhưng có vấn đề về đệm và điểm trên cùng và dưới cùng bị cắt. Tôi không thể thấy bất kỳ tùy chọn nào cho canvas đệm.

Cấu hình của tôi như sau.

var config = { 
    type: 'line', 
    data: { 
     labels: ["January", "February", "March", "April", "May", "June", "July"], 
     datasets: [{ 
      label: "Sales", 
      data: [10, 20, 50, 25, 60, 12, 48], 
      fill: true, 
      lineTension: 0.25, 
      borderColor: "#558aeb", 
      backgroundColor: "#558aeb" 
     }] 
    }, 
    options: { 
     responsive: true, 
     legend: { 
      display: false 
     }, 
     tooltips: { 
      mode: 'label' 
     }, 
     hover: { 
      mode: 'dataset' 
     }, 
     scales: { 
      xAxes: [{ 
       display: false 
      }], 
      yAxes: [{ 
       display: false 
      }] 
     } 
    } 
}; 

Answer 1

Tôi tin rằng vấn đề của bạn không phải là đệm, nhưng tôi có thể sai. Như tôi thấy, vấn đề của bạn là tự động phát hiện chiều cao của khu vực có thể vẽ được, khi số lượng tối đa trong dữ liệu của bạn đẹp và tròn, như 60. Hãy thử để xem nếu vấn đề vẫn tồn tại khi số lượng tối đa là 61, 62, vv Vì vậy, tôi đề nghị bạn nấu dữ liệu của bạn, để không có vấn đề như vậy xảy ra. Nếu việc nấu dữ liệu không phải là một tùy chọn, hãy thử xác định rõ ràng dấu tối đa trong trục y, sao cho nó chỉ vượt quá số lượng tối đa trong dữ liệu. Trong trường hợp của bạn, hãy thử sử dụng này:

yAxes: [{ 
    display: false, 
    ticks: { 
     max: 62 
    } 
}] 

Vì vậy, bạn sẽ cần phải tính toán số lượng tối đa trong các dữ liệu và thêm một cái gì đó nhỏ, để xác định một cách rõ ràng đánh dấu tối đa sẽ thoát khỏi sự cắt xén bất ngờ. Ai đó có thể có một sự hiểu biết và giải pháp tốt hơn nhưng đó là tùy chọn tôi có thể nghĩ đến. Điều đó, và nấu ăn dữ liệu của bạn, tất nhiên.

Answer 2

Tôi đã được nghiên cứu cách thực hiện hotfix để giải quyết điều đó. Tôi thấy ba hành vi kỳ lạ:

1- Các vi phạm dữ liệu nếu có những thay đổi lớn, ví dụ:

[0, 10, 70, 30, 20, 12, 50, 200, 200, 200, 200, 200] 

2- Các 'lỗi' luôn luôn là một nửa chiều cao của borderWidth của chúng tôi.

3 lỗi đó có thể được giới thiệu khi chúng ta thay đổi dòng 36 của core.layoutService.js trên tiếp theo COMMIT

Ở vị trí thứ hai tôi nhìn thấy hai vars đệm lạ bên trong hàm 'cập nhật' của lõi. layoutService:

Xung quanh dòng 29, chúng ta có chức năng và trên dòng 35 và 36, chúng ta có các vars lạ.

// The most important function 
     update: function(chartInstance, width, height) { 
      if (!chartInstance) { 
       return; 
      } 

      var xPadding = 0; 
      var yPadding = 0; 

Tôi đã được thấy chức năng của các vars đó, đặc biệt với yPadding. Tôi không thể có bất kỳ calc hữu ích được thực hiện với ypadding. Theo tôi, đây là vấn đề. Chúng tôi luôn duy trì ypadding đến 0 và IMHO, đó là lỗi được áp dụng trong phiên bản khác của tệp đó TẠI ĐÂY.

Giải pháp là sau và tôi đã phát triển điều đó bởi vì là yêu cầu phía sau nhà phát triển của cam kết đó đã xóa dòng.

THAT'S một hotfix, tôi sẽ làm cho một PR VÀ NẾU được phê duyệt, sẽ là giải pháp

Nếu bạn áp dụng mã bạn sẽ có thể thiết lập đệm của bạn trên phong cách cấu hình của bảng xếp hạng, cũng có thể, nếu bạn không áp dụng bất kỳ cấu hình nào, nó sẽ mặc định dựa trên chiều cao của biểu đồ.

Config prop dụ:

padding: { 
    x: 5, 
    y: 4 
}, 

Bạn có mã và tất cả các lời giải thích ở đây: https://github.com/chartjs/Chart.js/pull/3349

Answer 3

Nếu tôi hiểu câu hỏi đúng, phiên bản hiện tại (> 2.4) của Chart JS hỗ trợ đệm cấu hình tùy chọn xung quanh bố cục biểu đồ.

layout: { 
    padding: { 
     // Any unspecified dimensions are assumed to be 0      
     top: 25 
    } 
} 

Check here