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

Question

我已经尝试了 this 问题中发布的解决方案，将文本放在圆环图的内部（在中间，垂直和水平对齐）并且它几乎完美地工作。问题是每次鼠标悬停在图表上时，文本都会闪烁。好像是因为当鼠标悬停在图表上时，又调用了处理文字书写的函数。

我的组件代码是这样的：

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();
   }
});

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

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

declare var Chart: any;

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

Angular 2 ng2-charts doughnut text in the middle disappears on mouse hover

chart.js

ng2-charts

angular