angular 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 是动态的。该值是根据服务中的某些数据单击按钮计算得出的。我为此创建了一个 class 级别变量。但问题是在 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!!"; 是行不通的。这也将重绘整个图表。

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

angular charts.js doughnut chart setting center text dynamically

angular

ng2-charts