要在angular ng2-chart中移除甜甜圈图表中的标签并在外部显示并带箭头,可以使用以下步骤:
npm install ng2-chart --save
import { Component } from '@angular/core';
import { ChartOptions, ChartType } from 'chart.js';
import { Label, SingleDataSet } from 'ng2-charts';
@Component({
selector: 'app-doughnut-chart',
templateUrl: './doughnut-chart.component.html',
styleUrls: ['./doughnut-chart.component.css']
})
export class DoughnutChartComponent {
public doughnutChartLabels: Label[] = ['Label 1', 'Label 2', 'Label 3'];
public doughnutChartData: SingleDataSet = [30, 50, 20];
public doughnutChartType: ChartType = 'doughnut';
public doughnutChartOptions: ChartOptions = {
legend: {
display: false, // 隐藏图例
},
};
}
.chart-wrapper {
position: relative;
}
.arrow {
position: absolute;
top: 50%;
right: -20px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #000;
transform: translateY(-50%);
}
这样就可以在angular ng2-chart中移除甜甜圈图表的标签,并在外部显示并带箭头了。