javascript - 显示图表 - Angular 2

Question

我正在尝试在我的 Angular 2 应用程序中显示图表，即折线图。但我对图表的显示方式非常陌生。我正在关注 valor 软件的文档，但我没有得到好的结果。我的控制台中出现错误。我在我的 app.module.ts 中导入了 ChartsModule。我必须对折线图做些什么？

dashboard.html

<div class="row">
  <div class="col-md-6">
    <div style="display: block;">
    <canvas baseChart width="400" height="400"
                [datasets]="lineChartData"
                [labels]="lineChartLabels"
                [options]="lineChartOptions"
                [colors]="lineChartColors"
                [legend]="lineChartLegend"
                [chartType]="lineChartType"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"></canvas>
    </div>
  </div>
  <div class="col-md-6" style="margin-bottom: 10px">
    <table class="table table-responsive table-condensed">
      <tr>
        <th *ngFor="let label of lineChartLabels">{{label}}</th>
      </tr>
      <tr *ngFor="let d of lineChartData">
        <td *ngFor="let label of lineChartLabels; let j=index">{{d && d.data[j]}}</td>
      </tr>
    </table>
    <button (click)="randomize()">CLICK</button>
  </div>
</div>

仪表板组件

@Component({
  selector: 'line-chart-demo',
  templateUrl: './dashboard.html'
})
export class LineChartDemoComponent {
  // lineChart
  public lineChartData:Array<any> = [
    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
    {data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
  ];
  public lineChartLabels:Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  public lineChartOptions:any = {
    responsive: true
  };
  public lineChartColors:Array<any> = [
    { // grey
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    },
    { // dark grey
      backgroundColor: 'rgba(77,83,96,0.2)',
      borderColor: 'rgba(77,83,96,1)',
      pointBackgroundColor: 'rgba(77,83,96,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(77,83,96,1)'
    },
    { // grey
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    }
  ];
  public lineChartLegend:boolean = true;
  public lineChartType:string = 'line';

  public randomize():void {
    let _lineChartData:Array<any> = new Array(this.lineChartData.length);
    for (let i = 0; i < this.lineChartData.length; i++) {
      _lineChartData[i] = {data: new Array(this.lineChartData[i].data.length), label: this.lineChartData[i].label};
      for (let j = 0; j < this.lineChartData[i].data.length; j++) {
        _lineChartData[i].data[j] = Math.floor((Math.random() * 100) + 1);
      }
    }
    this.lineChartData = _lineChartData;
  }

  // events
  public chartClicked(e:any):void {
    console.log(e);
  }

  public chartHovered(e:any):void {
    console.log(e);
  }
}

angular-cli.json

"scripts": [
        "../node_modules/chart.js/src/chart.js"

       ],

错误

Uncaught ReferenceError: require is not defined
    at eval (eval at webpackJsonp.1166.module.exports (addScript.js:9), <anonymous>:4:38)
    at eval (<anonymous>)
    at webpackJsonp.1166.module.exports (addScript.js:9)
    at Object.519 (chart.js?7d5f:1)
    at __webpack_require__ (bootstrap 48f1b30…:52)
    at Object.1215 (addScript.js:10)
    at __webpack_require__ (bootstrap 48f1b30…:52)
    at webpackJsonpCallback (bootstrap 48f1b30…:23)
    at scripts.bundle.js:1

Answer 1

首先你必须安装 chart.js

npm install ng2-charts chart.js --save

once it's done need to import it in your app.module.ts file
import { ChartsModule } from 'ng2-charts';
@NgModule( declarations: [],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ChartsModule,

])

这些图表依赖于 C3，所以也必须包含它

 npm install c3

你错过的最后一件事你还必须添加样式 under angular.cli.json

"styles": [
    "../node_modules/c3/c3.min.css"
  ],