我正在使用带有工具提示的 Chart.js 饼图，由于某种原因被删除了。
附上截图，没有找到任何属性/选项来处理它..
有没有办法处理？
谢谢！
【问题讨论】：
标签： javascript canvas chart.js
这个不正确的截止在 ChartJS 的 Github 存储库中作为 issue#622 提出。
这被确定为一个错误（显然这个错误尚未修复）
https://github.com/nnnick/Chart.js/issues/622
针对该问题，Robert Turrall 提出了一个解决方案，他说这是一个很好的解决方法。这是他提出的解决方案：
我确定这是因为生成了工具提示 在画布范围内，很难修复。
我在甜甜圈图上遇到了同样的问题，并通过以下方式解决了它 根据示例文件夹中的示例实现自定义工具提示 - 在图表初始化代码中与我现有的工具提示字体大小和模板设置一起使用：
var myDoughnutChart = new Chart(donut).Doughnut(donutdata, { tooltipFontSize: 10, tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>hrs", percentageInnerCutout : 70 });查看 samples/pie-customTooltips.html 以获取自定义工具提示代码。 复制/粘贴，它立即工作。很高兴！
工具提示很好地显示在画布边界之外：
PS：还有一个折线图示例，我猜它会起作用 条形图很好。
【讨论】：
您可以向图表添加内部填充。例如，在我的情况下，我在右侧有一个工具提示。
options: {
responsive: true,
maintainAspectRatio: false,
cutoutPercentage: 60,
legend: {
display: false
},
animation: {
animateRotate: false
},
layout: {
padding: {
right: 40
}
}
}
【讨论】：
我找到了解决方法。我的 x 轴上有空白标签，所以我只是为最后一个标签条目添加了一个带有几个空格的标签。这导致 ChartJS 为标签留出足够的空间来适应，这也为工具提示留下了足够的空间。
此外，我的数据点有大圆圈，右边的最后一个之前被剪掉了。为标签添加额外的空间也解决了这个问题。
这是我创建标签的代码。 ratings 是我之前定义的实际数据：
// 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
}
]
};
即使您的图表上有实际标签，您也可以在最后一个标签上添加空格以使其更大。如果您将标签居中，则可以在前后添加相同数量的空间。
显然，这对你是否有效会有一些限制，但就我而言，我添加了 7 个空格，现在看起来一切都很好。
另外，我的案例右侧有问题，而这个问题左侧有问题。相同的修复应该可以工作，但将空间放在第一个标签上。
【讨论】：
就我而言，我可以通过减少工具提示中的文本数量来解决这个问题。我这样做是使用自定义工具提示回调来指定标签文本。我的初始化看起来像这样：
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;
},
}
},
},
});
似乎有一个可用的修复程序尚未合并到项目中：https://github.com/chartjs/Chart.js/pull/1064
【讨论】：
Chart.js 似乎无法确定显示工具提示的方向，因为当工具提示元素超出画布时，它无法检测工具提示元素的大小。
在我的场景中，我通过使用工具提示选项对象的这些选项将这个特定工具提示内的文本更紧密地挤压来修复它：
tooltips.titleMarginBottom = 1;
tooltips.bodySpacing = 1;
tooltips.yPadding = 2;
很奇怪的是，Chart.js 然后正确地决定在鼠标左侧而不是下方显示工具提示。 如果您可以选择工具提示相对于鼠标的显示方向，那就太棒了。
【讨论】：
有趣的是，通过将tooltipCaretSize 选项设置为0 解决了这个问题。{ tooltipCaretSize: 0, ... }
【讨论】：