Chart.js饼图工具提示被削减 [英] Chart.js pie tooltip getting cut

问题描述

我使用的Chart.js饼图带有由于某些原因而被剪切的工具提示。

I'm using Chart.js pie chart with tooltips which being cut for some reason.

附带的屏幕截图，没有发现需要注意的任何属性/选项

Screenshot attached, didn't found any attribute/option to take care of it..

反正还有照顾吗？

谢谢！

推荐答案

此在ChartJS的Github存储库中，由于问题＃622而引起了不正确的截止。

This improper cutoff was raised as issue#622 in the Github repository for ChartJS.

这被确定是一个错误（显然，该错误尚未修复。 ）

https://github.com。 com / nnnick / Chart.js / issues / 622

针对该问题，Robert Turrall有一个解决方案，他说这是一个很好的解决方法。这是他建议的解决方法：

In response to that issue, Robert Turrall has a solution which he says is a good workaround. Here is his proposed fix:

我确定这是由于工具提示是在

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
});

查看sample / pie-customTooltips.html中的自定义工具提示代码。
复制/粘贴，它立即起作用。很高兴！

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：也有一个折线图示例，其中我想使用条形图可以使
罚款。

PS: there's a line chart example too, which I'm guessing will work fine with bar charts.

这篇关于Chart.js饼图工具提示被削减的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！