Chart.js 饼图工具提示被删减

2022-01-22 00:00:00 canvas javascript chart.js

我正在使用带有工具提示的 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..

有没有办法处理它?<​​img src="https://i.stack.imgur.com/DsoOy.png" alt="Tooltip being cut">

Is there anyway to take care of it?

谢谢！

推荐答案

这个不正确的截止在 ChartJS 的 Github 存储库中被作为 issue#622 提出.

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

这被确定为一个错误(显然这个错误尚未修复)

https://github.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
});

查看 samples/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.

相关文章