Chart JS Zoom Pan | 易学教程

问题

I am using the Chart JS Zoom/Pan Plugin (https://github.com/chartjs/chartjs-plugin-zoom) and was wondering if there is a way to disable it when there is no data present. The current basic options settings are

pan: {
    enabled: true,
    mode: 'x'
},
zoom: {
    enabled: true,
    mode: 'x'
}

回答1:

Yes, you can change this by setting "enabled" to false and/or use chart.resetZoom() link

回答2:

Try this:

// since myChart.update() is not working. You need to do this.

var myChartOptions = myChart.options; // need to store in variable.

// check data present
if (data.length > 0) {
    myChartOptions.pan.enabled = true;
    myChartOptions.zoom.enabled = true;
    myChart.options = myChartOptions; // update myChart.options.
}
else {
    myChartOptions.pan.enabled = false;
    myChartOptions.zoom.enabled = false;
    myChart.options = myChartOptions; // update myChart.options.
}

回答3:

This answer is more about the title of original question than about on selective disable based on data.

I had many trouble with chart.js zoom and pan. Finally I managed to switch between following modes: zoom, area zoom, pan, zoom & pan

Package version:

  "chart.js": "^2.9.3",
  "chartjs-plugin-zoom": "^0.7.7",
  "ng2-charts": "^2.3.0",

Initial options for zoom & pan:

  import { ChartDataSets, ChartOptions, Point } from 'chart.js';
  import { Label, Color, BaseChartDirective  } from 'ng2-charts';
  import * as zoomPlugin from 'chartjs-plugin-zoom';
  // ...
    
  @ViewChild(BaseChartDirective ) private ChartComponent;
  public lineChartPlugins = [ zoomPlugin ];

  public chartOptions: ChartOptions = {
    // ...
    plugins: {
      zoom: {
        pan: {
          enabled: true,
          mode: 'xy'
          
          // ...
        },
        zoom: {
          enabled: true,
          drag: false,
          mode: 'xy',
          
          // ...
        }
      }
    },
    ...

Then to change zoom and pan modes:

  Refresh() {
    setTimeout(() => {
      this.ChartComponent.refresh();
    }, 10);
  }

  OnZoomClick($event: MouseEvent) {
    this.chartOptions.plugins.zoom.pan.mode = '';
    this.chartOptions.plugins.zoom.zoom.mode = 'xy';
    this.chartOptions.plugins.zoom.zoom.enable = true;
    this.chartOptions.plugins.zoom.zoom.drag = false;
    this.Refresh();
  }

  OnAreaZoomClick($event: MouseEvent) {
    this.chartOptions.plugins.zoom.pan.mode = '';
    this.chartOptions.plugins.zoom.zoom.mode = 'xy';
    this.chartOptions.plugins.zoom.zoom.enable = true;
    this.chartOptions.plugins.zoom.zoom.drag = true;
    this.Refresh();
  }

  OnPanClick($event: MouseEvent) {
    this.chartOptions.plugins.zoom.pan.mode = 'xy';
    this.chartOptions.plugins.zoom.zoom.mode = '';
    this.Refresh();
  }

  OnZoomPanClick($event: MouseEvent) {
    this.chartOptions.plugins.zoom.pan.mode = 'xy';
    this.chartOptions.plugins.zoom.zoom.mode = 'xy';
    this.chartOptions.plugins.zoom.zoom.enable = true;
    this.chartOptions.plugins.zoom.zoom.drag = false;
    this.Refresh();
  }

The refresh part is a little too aggressive but I did not found any better solution. If you know any better please let me know. See: link

来源：https://stackoverflow.com/questions/45310252/chart-js-zoom-pan

标签

chart.js

chart.js2