我正在使用 ng2 圆环图来显示一些项目,根据圆环图文档,它一切正常,但我需要更改的是,每个切片的标签显示仅在悬停时显示,但我需要的是它应该在每个切片中都是默认的。
Dashboard.component.html:
<canvas #mycanvas baseChart
[data]="doughnutChartData"
[labels]="doughnutChartLabels"
[chartType]="doughnutChartType"
[colors]="colors"
[options]="options"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
Dashboard.component.ts:
public doughnutChartLabels:string[] = ['Running', 'Stop', 'Idle'];
public doughnutChartData:number[] = [1, 4, 5];
public doughnutChartType:string = 'doughnut';
public colors: any[] = [{ backgroundColor: ["#008000", "#FF0000", "#FFA500"] }];
我需要的东西和图片一模一样
每个切片中的标签应该是默认的,并且只需要使用纯 typescript 而不是 javascript 来实现。请帮助我达到预期的结果。
最佳答案
您可以通过使用名为 - Chart.PieceLabel.js 的 Chart.js 插件来实现。 .
首先..通过 npm 安装它:
npm install chart.piecelabel.js --save
然后..将其导入您的仪表板组件:
import 'chart.piecelabel.js';
最后..在图表的选项配置中设置以下选项:
pieceLabel: {
render: 'label'
}
注意:这是显示标签需要设置的最低选项, 您可以找到更多选项 here .
参见 - working example
关于angular - 如何使用 ng2 图表在圆环图中显示标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46659986/