首页 文章

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

提问于
浏览
0

我是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方法)?标签也不会更新 . (我删除了那些代码)有人可以帮我这个吗?

1 回答

  • 0

    我希望你这样做

    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

相关问题