Ionic4--折线图

版权声明：喜欢可以转载，但是必须注明出处。技术要分享，专利要维护。 https://blog.csdn.net/wzcyamadie/article/details/86548520

无论ionic3还是ionic4，都可用！

折线图，柱状图，饼状图。。。都在这里。https://www.djamware.com/post/598953f880aca768e4d2b12b/creating-beautiful-charts-easily-using-ionic-3-and-angular-4

1，首先确保项目能启动，没有问题。然后：
1.1 安装Angular 2 Charts and Charts.js

		npm install ng2-charts --save	
		npm install chart.js --save	

1.2 导包
在你当前页面（需要画这些图的文件夹），打开***.model.ts文件

	import { ChartsModule } from 'ng2-charts';
	imports: [
		BrowserModule,
		IonicModule.forRoot(MyApp),
		ChartsModule
	],

这是所需要安装的全部东西。

2. 编写HTML和TS文件
   2.1，MTHL中

	<ion-content padding>
	  <div class="row">
	    <div class="col-md-6">
	      <div style="display: block;">
	      <canvas baseChart width="300" height="400"
	                  [datasets]="lineChartData"
	                  [labels]="lineChartLabels"
	                  [options]="lineChartOptions"
	                  [colors]="lineChartColors"
	                  [legend]="lineChartLegend"
	                  [chartType]="lineChartType"
	                  (chartHover)="chartHovered($event)"
	                  (chartClick)="chartClicked($event)"></canvas>
	      </div>
	    </div>
	  </div>
	</ion-content>

2.2 TS 中

	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);
	}

好了，这使用的是假数据，启动项目，看看是不是如下这样的一个折线图。