Thay đổi vị trí chú giải công cụ Chart.js

Question

Tôi đã tạo biểu đồ bánh rán bằng cách sử dụng Chart.js 2.5. Vấn đề tôi gặp phải là với chú giải công cụ. Khi tôi di chuột qua biểu đồ, một tooltip được hiển thị với một dấu mũ mà vẫn luôn luôn ở phía bên trái hoặc phải, như thế này:

Tôi muốn thay đổi vị trí dấu nháy để nó luôn hiển thị trong đáy. Điều đó có thể không?

Đây là mã biểu đồ của tôi

var myChart = new Chart(ctx, { 
    type: 'doughnut', 
    data: { 
     labels: ['Jan', 'Feb', 'Mar'], 
     datasets: [{ 
      label: 'dataset', 
      data: [30, 50, 20], 
      backgroundColor: [ 
      'rgb(153, 102, 255)', 
      'rgb(255, 205, 86)', 
      'rgb(54, 162, 235)' 
      ], 
     }], 
    } 
}) 

Answer 1

Bạn có thể thiết lập yAlign tài sản để bottom cho tooltips trong tùy chọn biểu đồ của bạn để hiển thị tooltip' s caret luôn ở vị trí đáy ...

options: { 
    tooltips: { 
     yAlign: 'bottom' 
    } 
} 

ᴅᴇᴍᴏ

var ctx = document.getElementById("chart").getContext("2d"); 
 
var myChart = new Chart(ctx, { 
 
    type: 'doughnut', 
 
    data: { 
 
     labels: ['Jan', 'Feb', 'Mar'], 
 
     datasets: [{ 
 
      label: 'dataset', 
 
      data: [30, 50, 20], 
 
      backgroundColor: ['rgb(153, 102, 255)', 'rgb(255, 205, 86)', 'rgb(54, 162, 235)'] 
 
     }] 
 
    }, 
 
    options: { 
 
     responsive: false, 
 
     tooltips: { 
 
      yAlign: 'bottom' 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<canvas id="chart" height="180"></canvas>

Answer 2

Bạn có thể làm điều này bằng cách thiết lập các tùy chọn yAligntooltips configuration tới "đáy":

options: { 
    tooltips: { 
     yAlign: "bottom" 
    } 
} 

JSFiddle Demo: https://jsfiddle.net/tksr7bn9/

Answer 3

lô cách để tùy biến các tooltip. Đây là một ví dụ tốt thông qua CodePen.

https://codepen.io/mab213/pen/PZOXdE

customTooltips: function(tooltip) { 
 
    // Tooltip Element 
 
    var tooltipEl = $('#chartjs-tooltip'); 
 
    // Hide if no tooltip 
 
    if (!tooltip) { 
 
    tooltipEl.css({ 
 
     opacity: 1 
 
    }); 
 
    return; 
 
    } 
 
    // Set caret Position 
 
    tooltipEl.removeClass('above below'); 
 
    tooltipEl.addClass(tooltip.yAlign); 
 
    tooltipEl.addClass(tooltip.xAlign); 
 
    // Set Text 
 
    tooltipEl.html(tooltip.text); 
 
    // Find Y Location on page 
 
    var top; 
 
    if (tooltip.yAlign == 'above') { 
 
    top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding; 
 
    } else { 
 
    top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding; 
 
    } 
 
    // Display, position, and set styles for font 
 
    tooltipEl.css({ 
 
    opacity: 1, 
 
    left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px', 
 
    top: tooltip.chart.canvas.offsetTop + top + 'px', 
 
    fontFamily: tooltip.fontFamily, 
 
    fontSize: tooltip.fontSize, 
 
    fontStyle: tooltip.fontStyle, 
 
    xOffset: tooltip.xOffset, 
 
    }); 
 
}