javascript - ChartJS : Change the positions of the tooltips

Question

我在使用 ChartJS 时遇到问题:我需要在我的项目中使用极坐标图，并且必须在 PDF 中显示该图形。

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

不幸的是，当标签很长时，显示效果不好:

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

Answer 1

目前，标签文本的中心位于您要显示标签的位置。如果将其更改为图表右侧和左侧标签的标签开头或标签结尾，您将获得更好的布局。

您还可以将标签对齐到更靠近扇区端点的位置，而不是靠近刻度的最外边缘。

具体操作方法如下

<强>1。覆盖您的体重秤

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

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 (将 self 设置为 Chartjs 图表对象)

<强>3。设置文本对齐方式

这取决于您位于图表的右侧还是左侧(或者顶部或底部)。

为此，首先对 Angular 进行归一化(使其在 0 到 2 * PI 范围内)

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

然后根据 Angular 范围简单设置文本位置(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";

“中心”使图表顶部和底部附近出现的标签的文本中间与扇区边缘对齐。 +5 和 -5 是填充的，这样它们就不会粘得太近。

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

<小时/>

fiddle - http://jsfiddle.net/nyjodx4v/

<小时/>

这就是它的样子