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

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

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

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

而这就是它的外观