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图表圆环文本消失

1 个答案: