我在 angular4 和 ionic3 项目中工作。这里我显示多个数据数组的 ng2 饼图。当数组中的数据增加时，图例宽度增加，聊天由于数据量大而消失。对于这个问题，我想创建一个自定义图例，以便我可以应用固定宽度并滚动到可能不会消失图表的图例数据。如何在 Angular2 中实现自定义图例？ 这是我的代码：
constructor(private db: AngularFireDatabase, private zone :NgZone, public navCtrl: NavController,
public navParams: NavParams, public popoverCtrl:PopoverController, public modalCtrl: ModalController,
public datepipe: DatePipe, private platform: Platform) {
this.chartValues();
this.gmaildata=JSON.parse(localStorage.getItem("gmaildata"));
this.admin = db.list('/Admin');
this.admin.subscribe(data => {
for(var i=0;i<data.length;i++){
if(this.gmaildata.email==data[i].email){
this.admindisplay={
email:data[i].email,
startdate:data[i].startdate,
enddate:data[i].enddate,
name:data[i].name,
remainingdays:Math.round(Math.abs((data[i].enddate-Date.now())/(1000*60*60*24)))
}
}
}
});
}
ngOnInit(){
}
/*this.getPatients();*/
getData(x) {
this.loading = true;
console.log(x);
console.log(this.selectedItems);
this.arr = [];
for(var i = 0; i < x.length; i++) {
if(this.arr.indexOf(x[i].id) < 0) {
this.arr.push(x[i].id);
}
}
console.log(this.arr);
var ref = firebase.database().ref("Visits");
this.hospInfoArr = [];
var ref1 = firebase.database().ref("Expenses");
this.expArr = [];
var ref2 = firebase.database().ref("Patients");
this.opArr =[];
var ref3 = firebase.database().ref("Medicine");
this.medArr = [];
console.log("id",this.arr[i]);
var id=this.arr[i];
ref.orderByChild("adminid").equalTo(this.ld).on("value", (dataSnapshot) => {
var x = dataSnapshot.val();
var hosp=[];
console.log(x);
this.hospInfoArr.length = 0;
for (var key in x) {
if (x.hasOwnProperty(key)) {
var element = x[key];
hosp.push(element)
}
}
console.log("hosp",(hosp),this.arr);
for(var i=0;i<hosp.length;i++){
for(var j= 0; j < this.arr.length; j++) {
if(hosp[i].branchid == this.arr[j]){
this.hospInfoArr.push(hosp[i]);
}
}
}
console.log("hospInforArr",this.hospInfoArr);
this.labels(this.hospInfoArr);
});
ref1.orderByChild("adminid").equalTo(this.ld).on("value", (snapshot) => {
var x = snapshot.val();
this.expArr.length =0;
var expense=[];
for(var key in x){
if(x.hasOwnProperty(key)) {
var ele = x[key];
expense.push(ele);
}
}
console.log("exp",expense);
for(var i=0;i<expense.length;i++){
for(var j=0;j<this.arr.length;j++){
if(expense[i].branchid == this.arr[j]){
this.expArr.push(expense[i]);
}
}
}
console.log("expenses",this.expArr);
this.expenses(this.expArr);
});
ref2.orderByChild("adminid").equalTo(this.ld).on("value", (snap) => {
var x = snap.val();
this.opArr.length = 0;
var ops=[];
for (var key in x) {
if (x.hasOwnProperty(key)) {
var ele = x[key];
ops.push(ele);
}
}
console.log("opssss",ops);
for(var i=0;i<ops.length;i++){
for(var j=0;j<this.arr.length;j++){
if(ops[i].branchid == this.arr[j]){
this.opArr.push(ops[i]);
}
}
}
console.log("ops",this.opArr);
this.ops(this.opArr);
});
ref3.orderByChild("adminid").equalTo(this.ld).on('value', (snap1) => {
var x = snap1.val();
this.medArr.length = 0;
var medicine=[];
for(var key in x) {
if (x.hasOwnProperty(key)) {
var ele = x[key];
medicine.push(ele);
}
}
console.log("medi",medicine);
for(var i=0;i<medicine.length;i++){
for(var j=0;j<this.arr.length;j++){
if(medicine[i].branchid == this.arr[j]){
this.medArr.push(medicine[i]);
}
}
}
console.log("medicines",JSON.stringify(this.medArr));
this.medicine(this.medArr);
});
this.loading = false;
}
labels(x){
this.revenueSum=0;
this.loading = true;
console.log(x);
this.pieChartLabels.length =0;
this.amountPaid.length = 0;
this.pieChartData=[];
this.barChartLabels1=[];
//this.data1 = [];
this.barChartData1 = [];
for(var i = 0; i < x.length; i++) {
if(this.pieChartLabels.indexOf(x[i].branchname) < 0){
this.pieChartLabels.push(x[i].branchname);
this.barChartLabels1.push(x[i].branchname);
}
this.amountPaid.push({branch: x[i].branchname, amount: x[i].amountpaid});
console.log("piechartlabels",this.pieChartLabels);
console.log("amountpaid",this.amountPaid);
}
//console.log(this.pieChartLabels);
for(var i = 0; i < this.pieChartLabels.length; i++) {
this.sum = 0;
for(var j = 0; j < this.amountPaid.length; ) {
if(this.pieChartLabels[i] == this.amountPaid[j].branch) {
this.sum = Number(this.sum) + Number(this.amountPaid[j].amount);
console.log("sum",this.sum);
j++;
} else {
j++;
}
}
console.log(this.sum);
this.pieChartData.push(this.sum);
this.data1.push(this.sum);
}
for(var i=0;i<this.pieChartData.length;i++){
this.revenueSum=this.revenueSum+Number(this.pieChartData[i]);
}
if(this.pieChartLabels.length==0&&this.pieChartLabels1.length==0&&this.pieChartLabels2.length==0&&this.pieChartLabels3.length==0){
this.hideMsg=false;
}
console.log(this.pieChartData);
this.barChartData1.push({data: this.data1});
}
expenses(y) {
console.log("visits",y);
this.expenseSum=0;
this.loading = true;
console.log(y);
this.pieChartLabels1.length=0;
this.money = [];
this.pieChartData1 = [];
for(var i = 0; i < y.length; i++){
if(this.pieChartLabels1.indexOf(y[i].branchname) < 0){
this.pieChartLabels1.push(y[i].branchname);
}
console.log("expenses labels",this.pieChartLabels1);
this.money.push({branch: y[i].branchname, amount: y[i].amount});
}
console.log(this.pieChartLabels1);
console.log(this.money);
for(var i = 0; i < this.pieChartLabels1.length; i++) {
this.sum = 0;
for(var j = 0; j < this.money.length;j++ ) {
if(this.pieChartLabels1[i] == this.money[j].branch) {
this.sum = Number(this.sum) + Number(this.money[j].amount);
}
}
console.log(this.sum);
this.pieChartData1.push(this.sum);
}
for(var i=0;i<this.pieChartData1.length;i++){
this.expenseSum=Number(this.expenseSum)+Number(this.pieChartData1[i]);
}
if(this.pieChartLabels.length==0&&this.pieChartLabels1.length==0&&this.pieChartLabels2.length==0&&this.pieChartLabels3.length==0){
this.hideMsg=false;
}
console.log(this.pieChartData1);
this.loading = false;
}
ops(x) {
console.log("ops",x);
this.opSum=0;
this.loading = true;
console.log("labels of op",x)
this.pieChartLabels3.length=0;
this.op = [];
this.pieChartData3 = [];
for(var i = 0; i < x.length; i++){
if(this.pieChartLabels3.indexOf(x[i].branchname) < 0){
this.pieChartLabels3.push(x[i].branchname);
}
//console.log("ops labels",this.pieChartLabels3);
this.op.push({branch: x[i].branchname, op: x[i].op});
}
console.log("ops",this.op,this.pieChartLabels3);
for(var i = 0; i < this.pieChartLabels3.length; i++){
this.count = 0;
for(var j = 0; j < this.op.length; j++) {
if(this.pieChartLabels3[i] == this.op[j].branch) {
this.count++;
}
}
this.pieChartData3.push(this.count);
}
for(var i=0;i<this.pieChartData3.length;i++){
this.opSum=this.opSum+Number(this.pieChartData3[i]);
}
if(this.pieChartLabels.length==0&&this.pieChartLabels1.length==0&&this.pieChartLabels2.length==0&&this.pieChartLabels3.length==0){
this.hideMsg=false;
}
this.loading = false;
}
medicine(x) {
console.log("medicine",x);
this.medicineSum=0;
this.loading = true;
this.pieChartLabels2.length=0;
this.amount = [];
this.pieChartData2=[];
this.barChartLabels=[];
this.data = [];
this.barChartData = [];
for(var i = 0; i < x.length; i++) {
if(this.pieChartLabels2.indexOf(x[i].branchname) < 0){
this.pieChartLabels2.push(x[i].branchname);
this.barChartLabels.push(x[i].branchname);
}
this.amount.push({branch: x[i].branchname, amount: x[i].amount});
}
console.log(this.pieChartLabels2);
console.log(this.amount);
//console.log(this.barChartLabels);
for(var i = 0; i < this.pieChartLabels2.length; i++) {
this.sum = 0;
for(var j = 0; j < this.amount.length;j++) {
if(this.pieChartLabels2[i] == this.amount[j].branch) {
console.log("branches",this.pieChartLabels2[i],this.amount[j].branch)
this.sum = Number(this.sum) + Number(this.amount[j].amount);
}
}
console.log(this.sum);
this.pieChartData2.push(this.sum);
this.data.push(this.sum);
}
for(var i=0;i<this.pieChartData2.length;i++){
this.medicineSum=this.medicineSum+Number(this.pieChartData2[i]);
}
if(this.pieChartLabels.length==0&&this.pieChartLabels1.length==0&&this.pieChartLabels2.length==0&&this.pieChartLabels3.length==0){
this.hideMsg=false;
}
console.log(this.pieChartData2,this.pieChartLabels2);
this.barChartData.push({data: this.data});
console.log(this.barChartData);
this.loading = false;
}
chartValues(){
this.loading = true;
var ref = firebase.database().ref("Visits");
this.Revenue.length = 0;
ref.orderByChild("adminid").equalTo(this.ld).on("value", (snap) => {
console.log(snap.val());
var x = snap.val();
for (var key in x) {
if (x.hasOwnProperty(key)) {
var element = x[key];
this.Revenue.push(element);
}
}
console.log("revenue",this.Revenue)
this.labels(this.Revenue);
});
var ref1 = firebase.database().ref("Expenses");
this.Expenses.length = 0;
ref1.orderByChild("adminid").equalTo(this.ld).on("value", (snap) => {
console.log(snap.val());
var x = snap.val();
for (var key in x) {
if (x.hasOwnProperty(key)) {
var element = x[key];
this.Expenses.push(element);
}
}
console.log("expenses",this.Expenses)
this.expenses(this.Expenses);
});
var ref = firebase.database().ref("Medicine");
this.Medicine.length = 0;
ref.orderByChild("adminid").equalTo(this.ld).on("value", (snap) => {
console.log(snap.val());
var x = snap.val();
for (var key in x) {
if (x.hasOwnProperty(key)) {
var element = x[key];
this.Medicine.push(element);
}
}
console.log("medicine",this.Medicine)
this.medicine(this.Medicine);
});
var ref2 = firebase.database().ref("Patients");
this.Patient.length = 0;
ref2.orderByChild("adminid").equalTo(this.ld).on("value", (snap) => {
console.log(snap.val());
var x = snap.val();
for (var key in x) {
if (x.hasOwnProperty(key)) {
var element = x[key];
this.Patient.push(element);
}
}
console.log("ops",this.Patient)
this.ops(this.Patient);
});
this.loading = false;
}
chartClicked(event) {
console.log(event);
if(event.active.length > 0){
var points = [];
var pointSelected = event.active[0]._chart.tooltip._model.caretY;
var legends = event.active[0]._chart.legend.legendItems;
for (var i = 0; i < event.active.length; ++i) {
points.push(event.active[i]._model.y);
}
let position = points.indexOf(pointSelected);
let label = legends[position].text
console.log("Point: "+label)
}
}
rangeSelected(range,patients){
this.opSum=0;
this.loading = true;
console.log("range",range);
this.count1 = 0;
this.pieChartData3 = [];
this.pieChartLabels3.length = 0;
var branchArr =[];
var opamounts = [];
console.log("pats",JSON.stringify(patients))
for(var i= 0;i<patients.length;i++){
var dateVal:any;
dateVal=new Date(patients[i]['date']);
dateVal=this.datepipe.transform(dateVal, 'yyyy-MM-dd');
console.log("patientdate",(dateVal),typeof(range[0]),range[0]<=dateVal);
if(range[0]<=dateVal && dateVal<=range[1]){
if(this.pieChartLabels3.indexOf(patients[i].branchname) < 0){
branchArr.push(patients[i].branchname);
this.pieChartLabels3.push(patients[i].branchname);
}
opamounts.push({branch:patients[i].branchname,amount:patients[i].op})
}
else if(range[1]<=dateVal && dateVal<=range[0]){
if(this.pieChartLabels3.indexOf(patients[i].branchname) < 0){
branchArr.push(patients[i].branchname);
this.pieChartLabels3.push(patients[i].branchname);
}
opamounts.push({branch:patients[i].branchname,amount:patients[i].op})
}
}
for(var i =0;i<branchArr.length;i++){
console.log("bracnharr length",branchArr);
var count =0;
for(var j=0;j<opamounts.length;j++){
if(branchArr[i] == opamounts[j].branch){
count++;
}
}
this.pieChartData3.push(count);
}
for(var i=0;i<this.pieChartData3.length;i++){
this.opSum=Number(this.opSum)+Number(this.pieChartData3[i]);
}
console.log("ops date",this.pieChartLabels3);
//this.loading = false;
}
/*expenses selected for the admin*/
expSelected(range,adminExp){
this.expenseSum=0;
this.loading = true;
this.count1 = 0;
this.pieChartData1= [];
this.pieChartLabels1.length = 0;
var branchArr =[];
var amounts = [];
var sum=0;
console.log("pats",JSON.stringify(this.adminExp))
for(var i= 0;i<adminExp.length;i++){
var dateVal:any;
dateVal=new Date(adminExp[i]['date']);
dateVal=this.datepipe.transform(dateVal, 'yyyy-MM-dd');
console.log("patientdate",(dateVal),typeof(range[0]),range[0]<=dateVal);
if(range[0]<=dateVal && dateVal<=range[1]){
if(this.pieChartLabels1.indexOf(adminExp[i].branchname) < 0){
branchArr.push(adminExp[i].branchname);
this.pieChartLabels1.push(adminExp[i].branchname);
}
amounts.push({branch:adminExp[i].branchname,amount:adminExp[i].amount})
}
else if(range[1]<=dateVal && dateVal<=range[0]){
if(this.pieChartLabels1.indexOf(adminExp[i].branchname) < 0){
branchArr.push(adminExp[i].branchname);
this.pieChartLabels1.push(adminExp[i].branchname);
}
amounts.push({branch:adminExp[i].branchname,amount:adminExp[i].amount})
}
}
for(var i =0;i<branchArr.length;i++){
console.log("bracnharr length",branchArr.length,amounts);
var count =0;
sum=0
for(var j=0;j<amounts.length;j++){
if(branchArr[i] == amounts[j].branch){
sum=Number(sum)+Number(amounts[j].amount);
}
}
this.pieChartData1.push(sum);
}
for(var i=0;i<this.pieChartData1.length;i++){
this.expenseSum=Number(this.expenseSum)+Number(this.pieChartData1[i]);
}
console.log("expense date",this.pieChartLabels1);
//this.loading = false;
}
visitSelected(range,adminVisits){
this.revenueSum=0;
this.loading = true;
this.count1 = 0;
this.pieChartData=[];
this.pieChartLabels.length = 0;
var branchArr =[];
var amounts = [];
var sum=0;
console.log("pats",JSON.stringify(this.adminExp))
for(var i= 0;i<adminVisits.length;i++){
var dateVal:any;
dateVal=new Date(adminVisits[i]['date']);
dateVal=this.datepipe.transform(dateVal, 'yyyy-MM-dd');
console.log("patientdate",(dateVal),typeof(range[0]),range[0]<=dateVal);
if(range[0]<=dateVal && dateVal<=range[1]){
if(this.pieChartLabels.indexOf(adminVisits[i].branchname) < 0){
branchArr.push(adminVisits[i].branchname);
this.pieChartLabels.push(adminVisits[i].branchname);
}
amounts.push({branch:adminVisits[i].branchname,amount:adminVisits[i].amountpaid})
}
else if(range[1]<=dateVal && dateVal<=range[0]){
if(this.pieChartLabels.indexOf(adminVisits[i].branchname) < 0){
branchArr.push(adminVisits[i].branchname);
this.pieChartLabels.push(adminVisits[i].branchname);
}
amounts.push({branch:adminVisits[i].branchname,amount:adminVisits[i].amountpaid})
}
}
for(var i =0;i<branchArr.length;i++){
console.log("bracnharr length",branchArr.length,amounts);
var count =0;
sum=0
for(var j=0;j<amounts.length;j++){
if(branchArr[i] == amounts[j].branch){
sum=Number(sum)+Number(amounts[j].amount);
}
}
this.pieChartData.push(sum);
}
for(var i=0;i<this.pieChartData.length;i++){
this.revenueSum=Number(this.revenueSum)+Number(this.pieChartData[i]);
}
console.log("visit date",this.pieChartLabels);
this.loading = false;
}
medSelected(range,medicine){
this.medicineSum=0;
this.loading = true;
this.pieChartData2=[];
this.pieChartLabels2.length = 0;
var branchArr =[];
var amounts = [];
var sum=0;
console.log("pats",JSON.stringify(medicine))
for(var i= 0;i<medicine.length;i++){
var dateVal:any;
dateVal=new Date(medicine[i]['date']);
dateVal=this.datepipe.transform(dateVal, 'yyyy-MM-dd');
console.log("patientdate",(dateVal),typeof(range[0]),range[0]<=dateVal&&dateVal<=range[1]);
if(range[0]<=dateVal && dateVal<=range[1]){
if(this.pieChartLabels2.indexOf(medicine[i].branchname) < 0){
branchArr.push(medicine[i].branchname);
this.pieChartLabels2.push(medicine[i].branchname);
}
amounts.push({branch:medicine[i].branchname,amount:medicine[i].amount})
}
else if(range[1]<=dateVal && dateVal<=range[0]){
if(this.pieChartLabels2.indexOf(medicine[i].branchname) < 0){
branchArr.push(medicine[i].branchname);
this.pieChartLabels2.push(medicine[i].branchname);
}
amounts.push({branch:medicine[i].branchname,amount:medicine[i].amount})
}
}
for(var i =0;i<branchArr.length;i++){
console.log("bracnharr length",branchArr,amounts);
var count =0;
sum=0
for(var j=0;j<amounts.length;j++){
if(branchArr[i] == amounts[j].branch){
sum=Number(sum)+Number(amounts[j].amount);
}
}
this.pieChartData2.push(sum);
}
//this.loading = false;
for(var i=0;i<this.pieChartData2.length;i++){
this.medicineSum=Number(this.medicineSum)+Number(this.pieChartData2[i]);
}
console.log("medicine date",this.pieChartLabels2);
}
//.............................
ionViewDidLoad() {
if (this.platform.is('core') || this.platform.is('mobileweb')) {
this.hideprofile = true;
}
}
}<ion-content padding>
<ion-grid>
<ion-row>
<ion-col col-md-6 col-sm-12 col-xs-12 *ngIf="pieChartLabels.length> 0">
<ion-card class="w3-animate-zoom" style="background-color:white;">
<ion-card-header style="background-color:#d9d9d9">
<p style="color:Black">REVENUE
<span style="float:right;">{{revenueSum}}</span></p>
</ion-card-header>
<ion-card-content padding>
<canvas baseChart [data]="pieChartData1" [labels]="pieChartLabels1" [chartType]="pieChartType" [options]="pieChartOptions" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col col-md-6 col-sm-12 col-xs-12 *ngIf="pieChartLabels1.length > 0">
<ion-card class="w3-animate-zoom" style="background-color:white">
<ion-card-header style="background-color:#d9d9d9">
<p style="color:Black">EXPENSES
<span style="float:right;">{{expenseSum}}</span></p>
</ion-card-header>
<ion-card-content padding>
<ion-grid>
<ion-row>
<ion-col col-md-8>
<canvas baseChart [data]="pieChartData1" [labels]="pieChartLabels1" [chartType]="pieChartType" [options]="pieChartOptions" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)" [legend]="false"></canvas></ion-col>
<ion-col col-md-4 *ngIf="pieChartLabels1" style="height: 130px;overflow: auto">
<ul baseChart>
<li *ngFor="let data of pieChartLabels1"><span (chartClick)="chartClicked($event)">{{data}}</span>
</li>
</ul>
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col col-md-6 col-sm-12 col-xs-12 *ngIf="pieChartLabels2.length > 0">
<ion-card class="w3-animate-zoom" style="background-color:white">
<ion-card-header style="background-color:#d9d9d9">
<p style="color:Black">MEDICINES
<span style="float:right;">{{medicineSum}}</span></p>
</ion-card-header>
<ion-card-content padding>
<canvas baseChart [data]="pieChartData2" [labels]="pieChartLabels2" [chartType]="pieChartType" [options]="pieChartOptions" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col col-md-6 col-sm-12 col-xs-12 *ngIf="pieChartLabels3.length > 0">
<ion-card class="w3-animate-zoom" style="background-color:white">
<ion-card-header style="background-color:#d9d9d9">
<p style="color:Black">OP'S
<span style="float:right;">{{opSum}}</span></p>
</ion-card-header>
<ion-card-content padding>
<canvas baseChart [data]="pieChartData3" [labels]="pieChartLabels3" [chartType]="pieChartType" [options]="pieChartOptions" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-md-6 col-sm-12 col-xs-12 *ngIf="pieChartLabels.length > 0">
<ion-card class="w3-animate-zoom" style="background-color:white">
<ion-card-header padding style="background-color:#d9d9d9">
<p style="color:Black">REVENUE</p>
</ion-card-header>
<ion-card-content padding>
<canvas baseChart [datasets]="barChartData1" [labels]="barChartLabels1" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col col-md-6 col-sm-12 col-xs-12 *ngIf="pieChartLabels2.length > 0">
<ion-card class="w3-animate-zoom" style="background-color:white">
<ion-card-header padding style="background-color:#d9d9d9">
<p style="color:Black">MEDICINES</p>
</ion-card-header>
<ion-card-content padding>
<canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>有类似的问题，我们没有尝试修改来自 lib 的现有图例，而是只是为图例创建了第二个元素，然后您几乎可以立即像任何元素一样定位/css 样式它。原来的传说只是隐藏起来。 唯一的问题可能是颜色同步，因此您需要创建可用颜色列表并将它们分配给数据集。
datasets.push({
data,
borderColor: '#000000',
backgroundColor: '#000000',
}, ...)
<div class="chart-container">
<canvas baseChart ...></canvas>
</div>
<div class="custom-legend-container" *ngFor="dataset of datasets">
<div class="legend-dataset">
<div class="legend-line" [ngStyle]="{ 'backgroundColor': dataset.backgroundColor }"></div>
<div class="legend-label" [ngStyle]="{ 'color': dataset.backgroundColor }">{{ dataset.label }}</div>
</div>
</div>