Question

我正在使用带有工具提示的Chart.js饼图，这些工具提示因某种原因被削减。

附带截图，没有找到任何属性/选项来处理它..

无论如何要照顾它吗？ Tooltip being cut

谢谢！

Answer 1

这个不正确的截止值是在ChartJS的Github存储库中作为问题＃622引发的。

这被确定为一个错误（显然这个错误尚未修复）

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

为了回应这个问题，Robert Turrall提出了一个解决方案，他说这是一个很好的解决方法。以下是他提出的解决方案：

我确信这是因为工具提示已生成   在画布的范围内，难以修复。

我在甜甜圈图表上遇到了同样的问题并解决了它   根据samples文件夹中的示例实现自定义工具提示    - 与图表初始化代码中现有的工具提示字体大小和模板设置一起使用：
var myDoughnutChart = new Chart(donut).Doughnut(donutdata, {
  tooltipFontSize: 10,
  tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>hrs",
  percentageInnerCutout : 70
});
查看样本/ pie-customTooltips.html以获取自定义工具提示代码。   复制/粘贴，它立即工作。很高兴！

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

PS：还有一个折线图示例，我猜它会起作用   条形图很好。

Answer 2

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

另外，我的案子在右侧有问题，而这个问题与左侧有问题。同样的修复应该有效，但是将空间放在第一个标签上。

Answer 3

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

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 4

看起来Chart.js无法确定显示工具提示的方向，因为它在超出画布时无法检测工具提示元素的大小。

在我的场景中，我通过使用tooltip选项对象的这些选项更紧密地压缩此特定工具提示内的文本来修复它：

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

然后，Chart.js正确地决定显示鼠标左侧的工具提示而不是下方。如果您可以选择工具提示与鼠标相比显示的方向，那将会很酷。

Answer 5

您可以向图表添加内部填充。例如，在我的情况下，我右侧有一个工具提示。

onDelete="SET NULL"

Answer 6

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

Chart.js派工具提示被削减

6 个答案: