中间的 Angular 2 ng2 图表甜甜圈文本在鼠标悬停时消失

Question

我已经尝试了这个问题中发布的解决方案，将文本放入圆环图的中间(中间，垂直和水平对齐(，它几乎完美地工作。问题是每次鼠标悬停在图表上时，文本都会闪烁。发生这种情况似乎是因为当鼠标悬停在图表上时，会再次调用处理文本写入的函数。

我的组件代码是这样的：

imports ....
@Component({
selector: 'my-component-app',
templateUrl: '../views/my-component.component.html',
styleUrls: ['../styles/my-component.component.css']
})
export class MyComponent implements OnInit {
chartOptions;
chartLabales;
chartData;
ngOnInit(): {
this.chartData = ....
this.chartOptions = ....
}
}

关于如何解决这个问题的任何想法？谢谢

Answer 1

您应该创建一个插件来绘制文本，而不是在动画完成时绘制它(这就是文本闪烁的原因，因为每次图表检测到任何用户交互时都会执行动画 onComplete 函数(。

ᴘʟᴜɢɪɴ

Chart.plugins.register({
afterDatasetsDraw: function(chart) {
if (!chart.options.centerText) return;
var ctx = chart.ctx,
width = chart.canvas.width,
height = chart.canvas.height;
var fontSize = (height / 250).toFixed(2);
ctx.font = fontSize + "em Verdana";
ctx.textBaseline = "middle";
ctx.fillStyle = "blue";
var text = "Pass Rate 82%",
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.restore();
}
});

^{* 文本绘图代码大多采用自此答案。}
在方法中添加此插件ngOnInit()然后在图表选项中添加 -centerText: true

此外，您需要在组件脚本的开头声明变量Chart，如下所示：

declare var Chart: any;