要使用Angular5 Ngx-chart库创建甜甜圈图表,并在标签内外显示标签,可以按照以下步骤进行:
npm install @swimlane/ngx-charts --save
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxChartsModule } from '@swimlane/ngx-charts';
@NgModule({
imports: [
BrowserModule,
NgxChartsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
在这个例子中,我们使用了[labelType]="'outer'"
属性来将标签显示在甜甜圈图表的外部。
export class AppComponent {
single = [
{
name: 'Germany',
value: 8940000
},
{
name: 'USA',
value: 5000000
},
{
name: 'France',
value: 7200000
}
];
}
这是一个简单的示例,其中包含了三个数据点。
请注意,这只是一个简单的示例,你可以根据你的需求来自定义图表的样式和属性。你可以根据ngx-chart的文档来了解更多的配置选项和用法。