Как реализовать масштабирование и перемещение в моем ng2-графике - PullRequest
Новая
       19

Как реализовать масштабирование и перемещение в моем ng2-графике

0 голосов
/ 05 ноября 2018

Предположим, есть один график и две кнопки. Кнопки делают это:

  1. активный зум
  2. график движения

Это мой код hmtl: 

<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)="zoom()">Zoom</button>
  <button (click)="move()">Move</button>
</div>

В моем файле TS: 

import { Component, OnInit,ViewChild} from '@angular/core';
import { BaseChartDirective } from 'ng2-charts/ng2-charts';

@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.css']
})
export class ExampleChart implements OnInit {

   @ViewChild(BaseChartDirective) chart: BaseChartDirective;

    ngOnInit() {
   }

public barChartOptions:any = {
    scaleShowVerticalLines: false,
    responsive: true,

    zoom: {
        // Boolean to enable zooming
        enabled: false,
        sensitivity:0.5,
        // Enable drag-to-zoom behavior
        drag: true,

        // Zooming directions. Remove the appropriate direction to disable 
        // Eg. 'y' would only allow zooming in the y direction
        mode: 'xy',
        rangeMin: {
            // Format of min zoom range depends on scale type
            x: null,
            y: null
        },
        rangeMax: {
            // Format of max zoom range depends on scale type
            x: null,
            y: null
        }
    }
  };

  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'},
    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series D'},
    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series '}

  ];

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

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

  public zoom():void {
    this.barChartOptions.zoom.enabled=true;
    this.chart.ngOnChanges({});

  }
  public move():void{

  }
}

Операция масштабирования работает нормально, но есть проблема, которую необходимо решить:

  1. когда я нажимаю на кнопку «зум», я включаю зум, но после » this.chart.ngOnChanges({}); "перезагрузите график и таким образом зум работает, но я хочу, чтобы график снова не загружался. Нужны ли ngOnChanges?
  2. Я хочу, чтобы при щелчке по кнопке движение на графике прекращало операцию масштабирования и начинало двигаться только вправо или влево, а если на графике было увеличение, то я не хочу, чтобы оно отменялось.

Кто-нибудь может мне помочь?

...