放大ng2-图

时间:2019-01-07 11:04:24

标签: angular typescript angular-chart ng2-charts

我研究了很多文章,但没有人清楚地说明放大ng-charts。 我正在使用演示折线图。我想用一个按钮集成缩放视图。这可能吗?有人可以帮忙吗?

HTML

           `<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>`

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';`

缩放视图示例图片:https://ibb.co/KGrZD4y

0 个答案:

没有答案