Zmień wskazówkę dla narzędzia Chart.js.

Question

Utworzyłem tabelę pączków, używając Chart.js 2.5. Problem, który mam, dotyczy etykiety narzędzia. Kiedy najechaniu na wykresie, etykietka jest wyświetlany z karetki, która zawsze pozostaje w lewej lub prawej stronie, podobnie jak to:

Chcę zmienić pozycję daszka tak, że zawsze pojawiają się w Dolny. Czy to jest możliwe?

Oto mój kod wykres

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

Można ustawić yAlign właściwość bottom dla podpowiedzi w opcjach wykres, aby wyświetlić podpowiedź”s daszka zawsze w dolnej pozycji ...

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

Można to zrobić poprzez ustawienie opcji yAligntooltips configuration na "dolny":

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

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

Answer 3

wiele sposobów, aby dostosować podpowiedź. Oto dobry przykład za pomocą 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, 
 
    }); 
 
}