Chú giải công cụ bánh Chart.js bị cắt

Question

Tôi đang sử dụng biểu đồ hình tròn Chart.js với các chú giải công cụ được cắt vì một lý do nào đó.

Ảnh chụp màn hình kèm theo, không tìm thấy bất kỳ thuộc tính/tùy chọn để chăm sóc nó ..

Liệu có cách nào để chăm sóc nó?

Cảm ơn!

Answer 1

Việc cắt giảm không chính xác này được nêu ra là vấn đề # 622 trong kho lưu trữ Github cho ChartJS.

này được xác định là một lỗi (rõ ràng lỗi này vẫn chưa được cố định)

https://github.com/nnnick/Chart.js/issues/622

Để đối phó với vấn đề đó, Robert Turrall có một giải pháp mà ông nói là một tốt cách giải quyết. Đây là bản sửa lỗi được đề xuất của anh ấy:

Tôi chắc chắn rằng điều này là do chú giải công cụ được tạo ra trong giới hạn của canvas, khiến bạn khó sửa.

tôi đã cùng một vấn đề trên bảng xếp hạng donut của tôi và giải quyết nó bằng thực hiện tooltips tùy chỉnh theo các ví dụ về thư mục mẫu - làm việc kết hợp với các thiết lập tooltip fontsize và mẫu hiện tại của tôi trong các mã biểu đồ khởi động:

var myDoughnutChart = new Chart(donut).Doughnut(donutdata, { 
    tooltipFontSize: 10, 
    tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>hrs", 
    percentageInnerCutout : 70 
}); 

Kiểm tra mẫu/pie-customTooltips.html để có mã tùy chỉnh công cụ tùy chỉnh. Sao chép/dán và nó hoạt động ngay lập tức. Rất vui!

Tooltip hiển thị tốt ngoài giới hạn của canvas:

PS: có là một ví dụ biểu đồ đường thẳng quá, mà tôi đoán sẽ làm việc tốt với biểu đồ cột.

Answer 2

Tôi đã tìm thấy giải pháp cho việc này. Tôi có nhãn trống trên trục x của mình, vì vậy tôi vừa thêm nhãn có nhiều khoảng trống trong nhãn cho mục nhập nhãn cuối cùng. Điều đó làm cho ChartJS để lại đủ không gian cho nhãn phù hợp, mà còn để lại đủ chỗ cho chú giải công cụ phù hợp.

Ngoài ra, tôi có vòng kết nối lớn cho các điểm dữ liệu của tôi và điểm cuối cùng ở bên phải đã bị cắt bớt trước đó. Việc thêm khoảng trống thừa vào nhãn cũng được sửa.

Đây là mã mà tôi tạo nhãn của mình. Các ratings được dữ liệu thực tế của tôi được xác định trước đó:

// Add blank labels and "Today" 
for (i=0; i<ratings.length; i++) { 
    labels.push(""); 
} 
labels[ratings.length-1] = "  "; 

var data = { 
    labels: labels, 
    datasets: [ 
     { 
      label: "Progress", 
      strokeColor: "rgba(255,165,0,1.0)", 
      pointColor: "white", 
      pointStrokeColor: "rgba(255,165,0,1.0)", 
      pointHighlightStroke: "#B87700", 
      data: ratings 
     } 
    ] 
}; 

Thậm chí nếu bạn có nhãn thực tế trên đồ thị của bạn, bạn có thể thêm không gian để nhãn cuối cùng của bạn để làm cho nó lớn hơn. Nếu bạn đang căn giữa nhãn, bạn có thể thêm cùng một lượng không gian trước và sau.

Rõ ràng sẽ có những giới hạn mà điều này sẽ hoặc sẽ không hiệu quả với bạn, nhưng đối với trường hợp của tôi, tôi đã thêm 7 dấu cách và tất cả đều có vẻ tốt ngay bây giờ.

Ngoài ra, trường hợp của tôi gặp vấn đề ở bên phải, trong khi câu hỏi này có vấn đề với phía bên trái.Bản sửa lỗi tương tự sẽ hoạt động, nhưng đặt không gian trên nhãn đầu tiên.

Answer 3

Điều thú vị là, bằng cách đặt tùy chọn tooltipCaretSize thành 0 giải quyết vấn đề.
{ tooltipCaretSize: 0, ... }

Answer 4

Trong trường hợp của tôi, tôi có thể khắc phục sự cố này bằng cách giảm lượng văn bản trong chú giải công cụ. Tôi đã làm như vậy bằng cách sử dụng calltip tùy chỉnh tooltip để xác định văn bản nhãn. khởi của tôi trông như thế này:

var chart = new Chart(canvas.getContext("2d"), { 
    type: 'line', 
    data: chartData, 
    options: { 
     responsive: true, 
     tooltips: { 
      callbacks: { 
       title: function(tooltipItems, data) { 
        return tooltipItems[0].xLabel; 
       }, 
       label: function(tooltipItems, data) { 
        return tooltipItems.yLabel; 
       }, 
      } 
     }, 
    }, 
}); 

Có vẻ như một sửa chữa có sẵn mà chưa được sáp nhập vào dự án: https://github.com/chartjs/Chart.js/pull/1064

Answer 5

Nó có vẻ như Chart.js không thể tìm ra hướng để hiển thị chú giải công cụ bởi vì nó không thể phát hiện kích thước của phần tử tooltip khi nó mở rộng ngoài canvas.

Trong kịch bản của tôi, tôi cố định nó bằng cách siết chặt các văn bản bên trong tooltip đặc biệt này gần gũi hơn với các tùy chọn cho các tùy chọn tooltip đối tượng:

 tooltips.titleMarginBottom = 1; 
     tooltips.bodySpacing = 1; 
     tooltips.yPadding = 2; 

Wierdly đủ Chart.js sau đó đúng quyết định để hiển thị tooltip sang trái của con chuột và không dưới đây. Sẽ thật tuyệt nếu bạn có thể chọn hướng xuất hiện chú giải công cụ so với chuột.

Answer 6

Bạn có thể thêm đệm nội bộ vào biểu đồ. Ví dụ trong trường hợp của tôi, tôi đã cắt một tooltips ở bên phải.

    options: { 
        responsive: true, 
        maintainAspectRatio: false, 
        cutoutPercentage: 60, 
        legend: { 
         display: false 
        }, 
        animation: { 
         animateRotate: false 
        }, 
        layout: { 
         padding: { 
          right: 40 
         } 
        } 
       }