更改 Chart.js 工具提示插入符号位置答案

【问题标题】：Change Chart.js tooltip caret position更改 Chart.js 工具提示插入符号位置
【发布时间】：2017-05-18 14:13:47
【问题描述】：

我使用Chart.js 2.5 创建了一个圆环图。我遇到的问题是工具提示。当我将鼠标悬停在图表上时，会显示一个带有插入符号的工具提示，该插入符号始终位于左侧或右侧，如下所示：

我想更改插入符号的位置，使其始终显示在底部。这可能吗？

这是我的图表代码

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)'
            ],
        }],
    }
})

【问题讨论】：

标签： javascript charts chart.js2

【解决方案1】：

您可以将yAlign 属性设置为bottom，以便图表选项中的工具提示始终在底部位置显示工具提示's插入符号...

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>

【讨论】：

工具提示选项似乎不再具有yAlign 属性或者我错了吗？
@DongBinKim 仍然可以使用// @ts-ignore
@DongBinKim 它被颠倒了，因为它适用于插入符号而不是工具提示（奇怪的 API 选择）

【解决方案2】：

您可以通过将yAlign tooltips configuration 选项设置为“底部”来做到这一点：

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

JSFiddle 演示：https://jsfiddle.net/tksr7bn9/

【讨论】：

感谢您的回复。不得不接受另一个，因为它是第一个:)
@CamielJacobs 我同意。很高兴我能帮上忙。我同时写了这个答案，在我发布之后才看到另一个答案。一旦获得足够的声誉，您就可以对所有有用的答案进行投票。

【解决方案3】：

自定义工具提示的方法很多。这是 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,
  });
}

【讨论】：

【解决方案4】：

对于在 2021 年及以后努力实现此功能的任何人，工具提示对齐选项适用于 caret 的位置。因此，如果您将yAlign 设置为'bottom'，这意味着工具提示必须在顶部对齐（以便插入符号保持在底部）。所以它只是向后 - 如果您需要在底部呈现工具提示，请改为设置插入符号的 yAlign: 'top'。

例子：

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: 'top'
        }
    }
});

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

【讨论】：