Question

我将数据导入图表图表（角度为2的ng2图表），我正在从json文件加载数据。我想知道如何覆盖图表上的标签文字？

以下是我所拥有的内容：https://plnkr.co/edit/xr6xs6PmaF9iQ6DsRnHT?p=preview

在图表的顶部有Label 0我想覆盖/更改标签文本说：Test Results我如何使用我当前的代码结构来做这件事。

Answer 1

拳头，请更新您的问题以包含来自plunker的代码。以防plunker被删除。

您必须使用datasets输入而不是data才能利用图例标签。

plunker https://plnkr.co/edit/UUW0uHdyVacK7ZMqUsp0?p=preview

//our root app component
import {Component, NgModule, OnInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {ChartsModule, Color} from 'ng2-charts';
import { Http, Response, HttpModule, JsonpModule  } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { DataService } from './service';
import { IDataChart } from './dataChart';

@Component({
  selector: 'my-app',
  providers: [DataService],
  template: `
    <div style="width:100%; display:block">
      <canvas *ngIf="loaded" baseChart [datasets]="barChartData" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
      </canvas>
    </div>
  `,
})
export class App {

  barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true,
    scales: {
        xAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
  };
  barChartLabels: string[] =[];
  barChartType: string = 'horizontalBar';
  barChartLegend: boolean = true;
  barChartData: any[] =[];
  resultData: IDataChart[] =[];
  loaded = false;

  constructor(private dataService: DataService) {
  }

  getData(){
    this.dataService.getData().subscribe(data => {
      this.resultData = data;
      this.barChartLabels = this.resultData.map(item => item.label);
      var d=this.resultData.map(item => item.data)
      this.barChartData = this.resultData.map(item => <any>{"data":Array.of(item.data), "label":item.label}); // <-- map to correct data structure for 'datasets'
      console.log(this.barChartData)
      // add new data set
      //this.barChartData.push({data:[200], label:"new data set"})
      this.loaded = true;
    }
  }

  ngOnInit() {
    this.getData();
  }
}

@NgModule({
  imports: [ 
    BrowserModule,
    ChartsModule,
    HttpModule,
    JsonpModule
  ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

更改导入的图表数据上的ng2-charts标签文本

1 个答案: