ChartJS：更改工具提示的位置 [英] ChartJS: Change the positions of the tooltips

问题描述

我有一个ChartJS的问题：我需要为我的项目使用Polar图，我必须用PDF显示这个图形。

I have a problem with ChartJS: I need to use a Polar graph for my project and I have to show this graphic in a PDF.

我还需要显示工具提示而不悬停。问题是这些工具提示位于每个数据的中心。
我希望在图表之外找到这个特定的一个。我修改了Chart.js很多，现在我有：

I also need to display the tooltips without hover. The problem is that these tooltips are at the center of each data. I want this specific one to be found outside of the graph. I modified the Chart.js a lot and now I have:

不幸的是，当标签很长时，显示效果不佳：

Unfortunately when the labels are long, the display is not good:

我的方法不好。有人已设法在圈外显示工具提示吗？

My method is not good. Has someone already managed to display tooltips outside the circle?

推荐答案

目前您的标签文字的中心位于您要显示标签的位置。如果您将其更改为标签的开头或标签的右侧和左侧标签的末尾，您将拥有更好的布局。

Currently the center of your label text is at the position where you want to show the label. If you change it to the start of your label or end of your label for labels on the right and left of your chart, you'll have much better layout.

您还可以将标签更靠近行业终点而不是标尺的最外边缘。

You could also align your labels closer to the sector end point instead of the outermost edge of the scale.

这是你如何做的

1。覆盖您的比例

这样图表就不会占用整个画布。我已经为样本数据集硬编码了这些值，您可以轻松地使用输入数据来获得合适的值

So that the chart does not take up the full canvas. I've hardcoded these values for a sample dataset, you could just as easily use the input data to get suitable values

scaleOverride: true,
scaleStartValue: 0,
scaleStepWidth: 40,
scaleSteps: 10,

2。绘制标签

最佳位置是动画结束。

onAnimationComplete: function () {
    this.segments.forEach(function (segment) {

找出每个扇区的外边缘 - 这并不困难。我们只使用工具提示位置使用的相同功能

Figure out the outer edge of each sector - this is not that difficult. We just use the same function that the tooltip position uses

var outerEdge = Chart.Arc.prototype.tooltipPosition.apply({
    x: this.chart.width / 2,
    y: this.chart.height / 2,
    startAngle: segment.startAngle,
    endAngle: segment.endAngle,
    outerRadius: segment.outerRadius * 2 + 10,
    innerRadius: 0
})

outerRadius决定你希望标签出现在中心的距离.x 2是因为工具提示通常出现在中间+ 10是填充，因此标签不会太靠近扇区的末端

outerRadius decides how far away from the center you want your labels to appear. The x 2 is because the tooltip normally appears in the middle of the sector. The + 10 is padding so that the label does not stick too close to end of the sector

如果你想要他标记为全部出现在刻度的外边缘使用 outerRadius = self.scale.drawingArea * 2 （将自己设置为Chartjs图表对象）

If you want the labels to all appear on the outer edge of the scale use outerRadius = self.scale.drawingArea * 2 (with self set to the Chartjs chart object)

3。设置文本对齐

这取决于您是在图表的右侧还是左侧（或顶部或底部）。

This is based on whether you are on the right or left side of the graph (or the top or bottom).

为此，首先将角度标准化（使其在0到2 * PI之内）

For this, first normalize the angle (so that it is within 0 to 2 * PI)

var normalizedAngle = (segment.startAngle + segment.endAngle) / 2;
while (normalizedAngle > 2 * Math.PI) {
    normalizedAngle -= (2 * Math.PI)
}

然后根据角度范围设置文本位置（0弧度在右侧中间，弧度在逆时针方向增加）。

Then simply set the text position depending on the range of the angle (0 radians is on the right side middle and the radians increase anticlockwise).

if (normalizedAngle < (Math.PI * 0.4) || (normalizedAngle > Math.PI * 1.5))
    ctx.textAlign = "start";
else if (normalizedAngle > (Math.PI * 0.4) && (normalizedAngle < Math.PI * 0.6)) {
    outerEdge.y += 5;
    ctx.textAlign = "center";
}
else if (normalizedAngle > (Math.PI * 1.4) && (normalizedAngle < Math.PI * 1.6)) {
    outerEdge.y -5;
    ctx.textAlign = "center";
}
else
    ctx.textAlign = "end";

中心使得出现在图表顶部和底部附近的标签具有其文本的中间与扇区边缘对齐。 +5和-5是填充，因此它们不会太靠近。

The "center" makes labels that appear near the top and bottom of the graph have the middle of their text align to the sector edge. The +5 and -5 are padding so that they don't stick too close.

ctx.fillText(segment.label, outerEdge.x, outerEdge.y);

---

小提琴 - http://jsfiddle.net/nyjodx4v/

以下是它的样子

这篇关于ChartJS：更改工具提示的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！