Angular2 :: Add Module 2 (모듈 추가)

셋팅이 완료 되었다 가정하고 진행합니다

여러개의 차트가 있는데 그중에 가장 많이 쓰이는 bar형식의 차트를 이용해버려합니다 

testsample1.html

<div>
  <div style="display: block">
    <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
  </div>
  <button (click)="randomize()">Update</button>
</div>

testsample1.ts

   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: 'Series A'},
    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
  ];
 
  // events
  public chartClicked(e:any):void {
    console.log(e);
  }
 
  public chartHovered(e:any):void {
    console.log(e);
  }
 

오픈소스에 제공하는 간단한 데모를 적용시켜본것입니다

datasets , labels,options 등을 ts 에서 값들을 입력해줍니다 

실행해보겠습니다

다음 포스팅에는 크롤링한데이터를 적용해볼예정입니다