Chart.js派工具提示被削减

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

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

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

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

Is there anyway to take care of it? Chart.js派工具提示被削减

反正有没有照顾它？

Thanks!

谢谢！

6 个解决方案

#1

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

这个不正确的截止值被提升为ChartJS的Github存储库中的问题＃622。

This was determined to be a bug (evidently this bug hasn't yet been fixed)

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

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

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

为了回应这个问题，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!

查看样本/ pie-customTooltips.html以获取自定义工具提示代码。复制/粘贴，它立即工作。很高兴！

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.

PS：还有一个折线图示例，我猜测它可以与条形图一起使用。

#2

I found a workaround for this. I have blank labels on my x axis, so I just added a label with several spaces in it for the last label entry. That caused ChartJS to leave enough space for the label to fit, which also leaves enough room for the tooltip to fit.

我找到了解决方法。我的x轴上有空白标签，所以我刚添加了一个带有几个空格的标签，用于最后一个标签条目。这导致ChartJS留下足够的空间让标签适合，这也为工具提示留出足够的空间来适应。

In addition, I have large circles for my data points and the last one on the right was getting clipped before. Adding the extra space to the label also fixed that.

另外，我的数据点有大圆圈，右边的最后一个圆圈被修剪过。在标签上添加额外的空间也固定了这一点。

Here is the code where I create my labels. The ratings is my actual data defined earlier:

这是我创建标签的代码。评级是我之前定义的实际数据：

// 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
      }
  ]
};

Even if you have actual labels on your graph, you could add spaces to your last label to make it bigger. If you are centering your label, you could add the same amount of space before and after.

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

Obviously there will be limits where this will or won't work for you, but for my case I added 7 spaces and all looks good now.

显然会有限制，这对你有用或不适用，但对于我的情况，我添加了7个空格，现在看起来都很好。

Also, my case had an issue on the right side, whereas this question has an issue with the left side. The same fix should work, but putting the space on the first label.

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

#3

In my case, I was able to work around this issue by reducing the amount of text in the tooltip. I did so using custom tooltip callbacks to specify the label text. My initialization looked like this:

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

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

There appears to be a fix available that hasn't yet been merged into the project: https://github.com/chartjs/Chart.js/pull/1064

似乎有一个尚未合并到项目中的修复程序：https：//github.com/chartjs/Chart.js/pull/1064

#4

It seems like Chart.js can't figure out which direction to show the tooltip because it can't detect the size of the tooltip element when it extends beyond the canvas.

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

In my scenario I fixed it by squeezing the text inside this particular tooltip closer with these options for the tooltip options object:

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

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

Wierdly enough Chart.js then correctly decides to show the tooltip to the left of the mouse and not below. Would be cool if you could choose which direction the tooltip appears compared to the mouse.

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

#5

You can add internal padding to the chart. For instance in my case I had a cut of tooltips on the right.

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

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

#6

-1

Interestingly, by the setting the tooltipCaretSize option to 0 solves the issue.
{ tooltipCaretSize: 0, ... }

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

#1