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

我将数据导入graph chart（angular 2中的ng2图表），并从json文件加载数据。我想知道如何覆盖图表上的标签文本

以下是我所拥有的：

---

在图的顶部有

标签0

我想覆盖/更改标签文本，说：

测试结果

我如何用我当前的代码结构来实现这一点

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

您必须使用

数据集

输入而不是

数据

来利用图例标签

普朗克

//我们的根应用程序组件
从“@angular/core”导入{Component，NgModule，OnInit}
从“@angular/platform browser”导入{BrowserModule}
从“ng2图表”导入{ChartsModule，Color}；
从'@angular/Http'导入{Http，Response，HttpModule，JsonpModule}；
从“rxjs/Observable”导入{Observable}；
从“./service”导入{DataService}；
从“/dataChart”导入{IDataChart}；
@组成部分({
选择器：“我的应用程序”，
提供者：[数据服务]，
模板：`
`,
})
导出类应用程序{
条形图选项：任意={
ScaleShowVerticalline:错误，
回答：是的，
比例：{
xAxes：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
};
条形图标签：字符串[]=[]；
barChartType:string='horizontalBar'；
条形图图例：布尔值=真；
条形图数据：任意[]=[]；
结果数据：IDataChart[]=[]；
加载=错误；
构造函数（专用数据服务：数据服务）{
}
getData（）{
this.dataService.getData（）.subscribe（数据=>{
this.resultData=数据；
this.barChartLabels=this.resultData.map（item=>item.label）；
var d=this.resultData.map（item=>item.data）
this.barChartData=this.resultData.map（item=>{“data”：Array.of（item.data），“label”：item.label}）；//首先，请更新您的问题以包含来自plunker的代码。以防plunker被删除

您必须使用
数据集
输入而不是
数据
来利用图例标签

普朗克

//我们的根应用程序组件
从“@angular/core”导入{Component，NgModule，OnInit}
从“@angular/platform browser”导入{BrowserModule}
从“ng2图表”导入{ChartsModule，Color}；
从'@angular/Http'导入{Http，Response，HttpModule，JsonpModule}；
从“rxjs/Observable”导入{Observable}；
从“./service”导入{DataService}；
从“/dataChart”导入{IDataChart}；
@组成部分({
选择器：“我的应用程序”，
提供者：[数据服务]，
模板：`
`,
})
导出类应用程序{
条形图选项：任意={
ScaleShowVerticalline:错误，
回答：是的，
比例：{
xAxes：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
};
条形图标签：字符串[]=[]；
barChartType:string='horizontalBar'；
条形图图例：布尔值=真；
条形图数据：任意[]=[]；
结果数据：IDataChart[]=[]；
加载=错误；
构造函数（专用数据服务：数据服务）{
}
getData（）{
this.dataService.getData（）.subscribe（数据=>{
this.resultData=数据；
this.barChartLabels=this.resultData.map（item=>item.label）；
var d=this.resultData.map（item=>item.data）
this.barChartData=this.resultData.map（item=>{“data”：Array.of（item.data），“label”：item.label}）；//因为我不需要每个项目都有一个特定的标签，所以我根据需要修改了它：
“label”：“testresults”
-非常感谢您的帮助。谢谢您的帮助--您的plunker正是我所需要的，因为我不需要为每件物品指定一个特定的标签，我根据自己的需要更改了它：
“标签”：“测试结果”
-非常感谢您的帮助。谢谢您的帮助--您的plunker正是我所需要的
//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 {}