Chart.js饼图提示框被截断

Question

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

附加了截图，没有找到任何属性/选项来解决它..

有没有什么办法可以解决它？

谢谢！

- Idan Gozlan

---

你有办法控制工具提示的方向吗？ - Gaurav Dave

如果我有任何线索怎么做的话，我就不会来这里了 ;) - Idan Gozlan

将您的图形代码发布到jsfiddle上，我们可能会从那里为您提供一些帮助。 - rtome

我在这里添加了一个解决方案 https://dev59.com/KF0a5IYBdhLWcg3wS3C8#54301153 - olidem

你最好使用自定义HTML来渲染工具提示。在这里可以看到一个官方的例子，它完全可以正常工作。https://www.chartjs.org/samples/latest/tooltips/custom-pie.html - Aaron Hudon

Answer 1

这个不当的截断问题被提出为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获取自定义工具提示代码。 复制/粘贴，它立即就可以运行。非常开心！

工具提示显示在画布范围之外：

顺便提一下：还有一个折线图的例子，我猜应该也适用于条形图。

- markE

---

Chart.js文档已经提供了使用外部工具提示的解决方法。您可以查看我的解决方案，该解决方案针对相同的问题提供了外部工具提示的代码。 - gdrt

Answer 2

您可以为图表添加内部填充。例如，在我的情况下，我在右侧的工具提示上做了裁剪。

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

- Mike Eshva

---

布局填充有所帮助。 - chithra

Answer 3

我找到了一个解决方法。我的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个空格，现在看起来很好。

此外，我的情况在右侧存在问题，而这个问题在左侧存在。同样的解决方法应该适用，只需在第一个标签上加入空格即可。

- MindJuice

Answer 4

看起来 Chart.js 无法确定提示框的方向，因为当它扩展到画布之外时，它无法检测到提示框元素的大小。

在我的情况下，我通过使用提示框选项对象中的以下选项将此特定提示框中的文本压缩得更紧密来解决了这个问题:

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

奇怪的是，Chart.js 正确地决定将工具提示显示在鼠标左侧而不是下方。 如果能选择工具提示相对于鼠标出现的方向会很酷。

- Peheje

Answer 5

在我的情况下，我通过减少工具提示中的文本量来解决了这个问题。我使用自定义的工具提示回调函数来指定标签文本。我的初始化如下所示：

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

- DPG

Answer 6

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

- Mark Gutierrez