ChartJS：更改工具提示的位置

Question

我對ChartJS有問題：我需要在項目中使用極坐標圖，並且必須以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
})

outsideRadius決定要讓標簽顯示的中心距離。 x 2是因為工具提示通常出現在扇形的中間。 + 10填充以使標簽不會太靠近扇區末端

如果希望標簽全部顯示在比例尺的外邊緣，請使用outerRadius = self.scale.drawingArea * 2 （ 將self設置為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/

---

這是它的樣子