LineChartA line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments.

Line - 图1

View on GitHub

  • linechartdemo.ts
  • linechartdemo.html

    linechartdemo.ts

  2. export class LineChartDemo {
  4.     data: any;
  6.     constructor(private messageService: MessageService) {
  7.         this.data = {
  8.             labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  9.             datasets: [
  10.                 {
  11.                     label: 'First Dataset',
  12.                     data: [65, 59, 80, 81, 56, 55, 40],
  13.                     fill: false,
  14.                     borderColor: '#4bc0c0'
  15.                 },
  16.                 {
  17.                     label: 'Second Dataset',
  18.                     data: [28, 48, 40, 19, 86, 27, 90],
  19.                     fill: false,
  20.                     borderColor: '#565656'
  21.                 }
  22.             ]
  23.         }
  24.     }
  26.     selectData(event) {
  27.         this.messageService.add({severity: 'info', summary: 'Data Selected', 'detail': this.data.datasets[event.element._datasetIndex].data[event.element._index]});
  28.     }
  29. }
  30.  

linechartdemo.html

  2. <p-toast [style]="{marginTop: '80px'}"></p-toast>
  4. <p-chart type="line" [data]="data" (onDataSelect)="selectData($event)"></p-chart>
  5.