角度图表.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 中无法访问。如何访问此变量？

Answer 1

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

因此，根据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!!";不起作用。此外，这将重绘整个图表。