Javascript Chart.js 饼图工具提示被剪切
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28476159/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chart.js pie tooltip getting cut
提问by Idan Gozlan
I'm using Chart.js pie chart with tooltips which being cut for some reason.
我正在使用带有工具提示的 Chart.js 饼图，这些工具提示由于某种原因被删除。
Screenshot attached, didn't found any attribute/option to take care of it..
附上截图，没有找到任何属性/选项来处理它..
Is there anyway to take care of it?
有没有办法照顾它？
Thanks!
谢谢！
采纳答案by markE
This improper cutoff was raised as issue#622 in the Github repository for ChartJS.
这个不正确的截止在 ChartJS 的 Github 存储库中作为问题#622 提出。
This was determined to be a bug (evidently this bug hasn't yet been fixed)
这被确定是一个错误（显然这个错误还没有被修复）
https://github.com/nnnick/Chart.js/issues/622
https://github.com/nnnick/Chart.js/issues/622
In response to that issue, Robert Turrall has a solution which he says is a good workaround. Here is his proposed fix:
针对这个问题，Robert Turrall 提出了一个解决方案，他说这是一个很好的解决方法。这是他提出的修复方案：
I'm sure that this is due to the fact that the tooltips are generated within the confines of the canvas, making it difficult to fix.
I had the same issue on my doughnut chart and solved it by implementing custom tooltips as per the example on the samples folder - worked in conjunction with my existing tooltip fontsize and template settings in the chart initialisation code:
var myDoughnutChart = new Chart(donut).Doughnut(donutdata, { tooltipFontSize: 10, tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>hrs", percentageInnerCutout : 70 });Check out samples/pie-customTooltips.html for the custom tooltip code. Copy/paste and it worked straight away. Very happy!
Tooltip displayed well outside the bounds of the canvas:
PS: there's a line chart example too, which I'm guessing will work fine with bar charts.
我确信这是因为工具提示是在画布范围内生成的，因此很难修复。
我在我的圆环图上遇到了同样的问题，并通过根据示例文件夹中的示例实现自定义工具提示来解决它 - 与图表初始化代码中我现有的工具提示字体大小和模板设置一起使用：
var myDoughnutChart = new Chart(donut).Doughnut(donutdata, { tooltipFontSize: 10, tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>hrs", percentageInnerCutout : 70 });查看 samples/pie-customTooltips.html 以获取自定义工具提示代码。复制/粘贴，它立即生效。很高兴！
工具提示很好地显示在画布边界之外：
PS：还有一个折线图示例，我猜它可以很好地用于条形图。
回答by MindJuice
I found a workaround for this. I have blank labels on my x axis, so I just added a label with several spaces in it for the last label entry. That caused ChartJS to leave enough space for the label to fit, which also leaves enough room for the tooltip to fit.
我找到了一个解决方法。我的 x 轴上有空白标签，所以我只是为最后一个标签条目添加了一个带有几个空格的标签。这导致 ChartJS 为标签留出足够的空间，这也为工具提示留下了足够的空间。
In addition, I have large circles for my data points and the last one on the right was getting clipped before. Adding the extra space to the label also fixed that.
此外，我的数据点有大圆圈，右边的最后一个以前被剪掉了。向标签添加额外的空间也解决了这个问题。
Here is the code where I create my labels. The ratingsis my actual data defined earlier:
这是我创建标签的代码。这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
}
]
};
Even if you have actual labels on your graph, you could add spaces to your last label to make it bigger. If you are centering your label, you could add the same amount of space before and after.
即使您的图表上有实际标签，您也可以在最后一个标签上添加空格以使其更大。如果您将标签居中，则可以在前后添加相同数量的空间。
Obviously there will be limits where this will or won't work for you, but for my case I added 7 spaces and all looks good now.
显然，这对您是否适用会有限制，但就我而言，我添加了 7 个空格，现在看起来都不错。
Also, my case had an issue on the right side, whereas this question has an issue with the left side. The same fix should work, but putting the space on the first label.
另外，我的案例在右侧有问题，而这个问题在左侧有问题。相同的修复应该有效，但将空格放在第一个标签上。
回答by DPG
In my case, I was able to work around this issue by reducing the amount of text in the tooltip. I did so using custom tooltip callbacks to specify the label text. My initialization looked like this:
就我而言，我能够通过减少工具提示中的文本量来解决此问题。我使用自定义工具提示回调来指定标签文本。我的初始化看起来像这样：
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;
},
}
},
},
});
There appears to be a fix available that hasn't yet been merged into the project: https://github.com/chartjs/Chart.js/pull/1064
似乎有一个尚未合并到项目中的可用修复程序：https: //github.com/chartjs/Chart.js/pull/1064
回答by Peheje
It seems like Chart.js can't figure out which direction to show the tooltip because it can't detect the size of the tooltip element when it extends beyondthe canvas.
Chart.js 似乎无法确定显示工具提示的方向，因为当工具提示元素超出画布时，它无法检测到工具提示元素的大小。
In my scenario I fixed it by squeezing the text inside this particular tooltip closer with these options for the tooltip options object:
在我的场景中，我通过使用工具提示选项对象的这些选项将这个特定工具提示内的文本压缩得更近来修复它：
tooltips.titleMarginBottom = 1;
tooltips.bodySpacing = 1;
tooltips.yPadding = 2;
Wierdly enough Chart.js then correctly decides to show the tooltip to the left of the mouse and not below. Would be cool if you could choose which direction the tooltip appears compared to the mouse.
奇怪的是 Chart.js 然后正确地决定在鼠标左侧而不是下方显示工具提示。如果您可以选择工具提示相对于鼠标出现的方向，那将会很酷。
回答by Mike Eshva
You can add internal padding to the chart. For instance in my case I had a cut of tooltips on the right.
您可以向图表添加内部填充。例如，在我的情况下，我在右侧有一个工具提示。
options: {
responsive: true,
maintainAspectRatio: false,
cutoutPercentage: 60,
legend: {
display: false
},
animation: {
animateRotate: false
},
layout: {
padding: {
right: 40
}
}
}
回答by Mark Gutierrez
Interestingly, by the setting the tooltipCaretSizeoption to 0solves the issue.{ tooltipCaretSize: 0, ... }
有趣的是，通过设置tooltipCaretSize选项来0解决问题。{ tooltipCaretSize: 0, ... }
