ChartJS：更改工具提示的位置

Question

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

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

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

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

Answer 1

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

您还可以将标签更靠近扇区终点而不是比例尺的最外边缘。

这是你怎么做的

<强> 1。覆盖您的比例

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

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

<强> 2。绘制标签

最佳位置是动画的结束。

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

弄清楚每个部门的外缘 - 这并不困难。我们只使用工具提示位置使用的相同功能

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 = self.scale.drawingArea * 2（将自设置为Chartjs图表对象）

第3。设置文字对齐

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

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

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

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

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";

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

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

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

以及它的外观