Chart.js 饼图工具提示被切掉

Question

我正在使用 Chart.js 带有工具提示的饼图，由于某种原因被剪掉了。

附上截图，没有找到任何attribute/option来处理..

有什么办法可以处理吗？

谢谢！

Answer 1

在 ChartJS 的 Github 存储库中作为问题 #622 提出了这个不正确的截断。

这被确定为一个错误（显然这个错误还没有被修复）

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

针对该问题，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.

Answer 2

我找到了解决方法。我的 x 轴上有空白标签，所以我只是为最后一个标签条目添加了一个带有几个 space 的标签。这导致 ChartJS 为标签留出足够的空间 space，同时也为工具提示留出足够的空间。

此外，我的数据点有大圆圈，右边的最后一个之前被剪掉了。在标签中添加额外的 space 也解决了这个问题。

这是我创建标签的代码。 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
      }
  ]
};

即使您的图表上有实际标签，您也可以将 space 添加到最后一个标签以使其更大。如果您将标签居中，则可以在前后添加相同数量的 space。

显然，这对您有用或不起作用会有限制，但对于我的情况，我添加了 7 spaces，现在一切看起来都不错。

此外，我的案例右侧有问题，而这个问题左侧有问题。相同的修复应该有效，但将 space 放在第一个标签上。

Answer 3

有趣的是，通过将 tooltipCaretSize 选项设置为 0 可以解决问题。
{ tooltipCaretSize: 0, ... }

Answer 4

就我而言，我能够通过减少工具提示中的文本量来解决此问题。我使用自定义工具提示回调来指定标签文本。我的初始化看起来像这样：

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

Answer 5

似乎Chart.js无法确定显示工具提示的方向，因为它在扩展超出时无法检测工具提示元素的大小canvas.

在我的场景中，我通过使用工具提示选项对象的这些选项将这个特定工具提示中的文本压缩得更近来修复它：

        tooltips.titleMarginBottom = 1;
        tooltips.bodySpacing = 1;
        tooltips.yPadding = 2;

非常奇怪 Chart.js 然后正确地决定将工具提示显示在鼠标左侧而不是下方。如果您可以选择工具提示相对于鼠标的显示方向，那就太好了。

Answer 6

您可以向图表添加内部填充。例如，在我的例子中，我在右边有一些工具提示。

                    options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutoutPercentage: 60,
                    legend: {
                        display: false
                    },
                    animation: {
                        animateRotate: false
                    },
                    layout: {
                        padding: {
                            right: 40
                        }
                    }
                }

Chart.js 饼图工具提示被切掉

Chart.js pie tooltip getting cut

javascript

canvas

chart.js