角charts.js圆环图动态设置中心文本

Question

我用

创建了一个圆环图

public doughnutChartPlugins: PluginServiceGlobalRegistrationAndOptions[] = [{
    beforeDraw(chart:any) {
      const ctx = chart.ctx;
      const txt = 'Center Text';

      //Get options from the center object in options
      const sidePadding = 60;
      const sidePaddingCalculated = (sidePadding / 100) * (chart.innerRadius * 2)

      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      const centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
      const centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);

      //Get the width of the string and also the width of the element minus 10 to give it 5px side padding
      const stringWidth = ctx.measureText(txt).width;
      const elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;

      // Find out how much the font can grow in width.
      const widthRatio = elementWidth / stringWidth;
      const newFontSize = Math.floor(30 * widthRatio);
      const elementHeight = (chart.innerRadius * 2);

      // Pick a new font size so it will not be larger than the height of label.
      const fontSizeToUse = Math.min(newFontSize, elementHeight);

      ctx.font = fontSizeToUse + 'px Arial';
      ctx.fillStyle = 'blue';

      // Draw text in center
      ctx.fillText(txt, centerX, centerY);
    }
  }];

目前，这有效并在甜甜圈中间显示 txt 的值。但是，我希望 txt 是动态的。该值是根据服务中的一些数据在单击按钮时计算的。我为此创建了一个类级变量。但问题是在 beforeDraw 中无法使用 this.variable。如何访问这个变量？

Answer 1

这似乎是一个 hacky 解决方案。但这是我能解决您的问题的唯一方法。希望对您有所帮助。

因此，根据ng2-charts 和charts.js 文档，可以将选项对象传递给图表。在此选项对象中传递的任何值都可以通过chart 对象在beforeDraw 方法中访问。这可用于实现您需要的行为。
工作样本：https://stackblitz.com/edit/ng2-charts-doughnut-centertext-uu3ftp
在此示例中，我将选项对象 chartOptions 传递给图表。

public centerText: String = "Center Text";
public chartOptions: ChartOptions & { annotation: any } = {
  centerText: this.centerText
};

在beforeDraw 方法中，我访问这个值如下：

ctx.fillText(chart.options.centerText, centerX, centerY);

要修改此值，您需要将chartOptions 设置为一个新对象：

this.chartOptions = {
  centerText: "Modified!!"
};

请注意，将其设置为this.chartOptions.centerText="Modified!!"; 不起作用。这也将重绘整个图表。