web-dev-qa-db-de.com

Ändern Sie die Caretip-Position von Chart.js

Ich habe ein Donut-Diagramm mit Chart.js 2.5 erstellt. Ich habe ein Problem mit dem Tooltip. Wenn ich über der Karte schwebe, wird ein Tooltip mit einem Einfügemarke angezeigt, der sich immer auf der linken oder rechten Seite befindet.

side tooltip

Ich möchte die Caret-Position so ändern, dass sie immer unten angezeigt wird. Ist das möglich?

Hier ist mein Chartcode 

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)'
            ],
        }],
    }
})
javascriptchartschart.js2
6
user8010590

Sie können die Eigenschaft yAlign für Tooltips in den Diagrammoptionen auf bottom setzen, um die QuickInfo 's - Einfügemarke immer in der untersten Position anzuzeigen ...

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>

12
ɢʀᴜɴᴛ

Sie können dies tun, indem Sie die Option yAligntooltips configuration auf "bottom" setzen:

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

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

1
Tot Zam

Viele Möglichkeiten, den Tooltip anzupassen. Hier ist ein gutes Beispiel über 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,
  });
}

1
Steven Ventimiglia