Question

我对Angular 5完全陌生。我想在我的应用中深入了解图表。有很多选项，对于这个项目，我想使用一个开源库。所以我使用的是ng2-charts。默认情况下，ng2-chart不支持向下钻取图表。所以我做的是点击事件我加载新数据和图表。这就是我的尝试。

component.ts

  export class ChartComponent{
  public clickBtn = false;
  data1:string;
  data2:string;
  label:string;
  previousBtnMsg:string;
  public chartClickTimes: number = 0;

 public barChartOptions:any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  public barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  public barChartType:string = 'bar';
  public barChartLegend:boolean = true;

  public barChartData:any[] = [
    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Type A'},
    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Type B'}
  ];

  public newDataValues:any[] = [
    {data: [40,37,50,70,50,34,50], label: 'Type A'},
    {data: [54,34,56,76,57,37,56], label: 'Type B'}
  ];

  // events
  public chartClicked(e:any):void {
    this.chartClickTimes =this.chartClickTimes + 1 ;
     this.clickBtn = true;

     if(e.active.length > 0) {

      this.previousBtnMsg = "Back to series";

      let newData1 = [40,37,50,70,50,34,50];
      let newData2 = [54,34,56,76,57,37,56];
      let newData3 = [35,36,45,64,43,23,33];
      let newData4 = [54,44,36,46,47,37,34];

      if(this.chartClickTimes ==1){
          let clone = JSON.parse(JSON.stringify(this.barChartData));
              clone[0].data = newData1;
              clone[1].data = newData2;
              this.barChartData = clone; 

      }else if(this.chartClickTimes ==2){
          let clone = JSON.parse(JSON.stringify(this.barChartData));
          clone[0].data = newData3;
          clone[1].data = newData4;
          this.barChartData = clone; 
      }
    } 

  }

  buttonClick(){
    console.log('Clicked')
  }


}

HTML

<div class="chart-display">
<div *ngIf="clickBtn">
  <button (click)="buttonClick(item)">{{previousBtnMsg}}</button>
</div>
  <div style="display: block">
    <canvas baseChart
            #baseChart="base-chart" 
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartClick)="chartClicked($event)"></canvas>
  </div>
</div>

当用户使用新图表时，它会显示“后退”按钮。如何显示该事件的上一个图表（buttonClick方法）？标签也不会更新。（我删除了那些代码）有人可以帮我这个吗？

Answer 1

我希望你这样做

import { ChartsModule } from 'ng2-charts/ng2-charts';
import {RouterExtensions} from "nativescript-angular/router";

// In your App's module:
imports: [
ChartsModule
]

然后您可以根据自己的需要进行导航。

constructor(private router: RouterExtensions) { }
 navigateBack() {
    this.router.back();
 }

请参加ngx-charts演示。！

https://github.com/valor-software/ng2-charts/tree/development/demo/src/app/components/charts

Angular ng2-chart显示按钮单击的上一个图表

1 个答案: