项目作者: jjppof

项目描述 :
A chartjs plugin for zooming, panning and select data in a chartjs instance.
高级语言: JavaScript
项目地址: git://github.com/jjppof/chartjs-plugin-zoom-pan-select.git
创建时间: 2020-01-28T01:40:05Z
项目社区:https://github.com/jjppof/chartjs-plugin-zoom-pan-select

开源协议:MIT License

下载


Chart control functions enhancement for ChartJS

A chartjs plugin for zooming, panning and selecting data in a chartjs instance.

See the example.

Install:

  1. npm install @jjppof/chartjs-plugin-zoom-pan-select

Usage:

  1. import ChartJSEnhancements from '@jjppof/chartjs-plugin-zoom-pan-select';
  2. let enhancer = new ChartJSEnhancements(chartjs_object);
  3. enhancer.initialize(mouse_buttons);
  4. /*
  5. mouse_buttons is an optional object with the mouse button number for each chart action (pan, zoom or select).
  6. More info about the numbers: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons#Return_value
  7. Example:
  8. mouse_buttons = {
  9. zoom: zoom_button_value, //optional
  10. select: select_button_value, //optional
  11. pan: pan_button_value //optional
  12. };
  13. */

Default behavior

  • Click, hold and drag on the plot area to create a select region;
  • Double click on canvas to reset zoom and pan;
  • Use the mouse wheel to zoom;
  • Hold shift and drag the chart to pan.

Methods:

  1. ChartJSEnhancements(chartjs_object, change_point_radius); //change_point_radius: default true, when selecting points, if this is set to true, the radius of the bullets changes
  2. initialize(mouse_buttons, background_color); // mouse_buttons explained on Usage section. background_color if the background color of your chart. Default: white
  3. setAction(action); //sets the mode of the chart if no mouse button is defined. The arg is a string that can be "zoom", "pan" or "select"
  4. setAfterSelectHandler(callable); //callable that receives the selected points array as arg
  5. setAfterUnselectHandler(callable);
  6. setZoomXFactor(factor); //factor is a number
  7. setZoomYFactor(factor);
  8. setBackgroundColor(color); //updates the background color of the chart
  9. setMinMax(); //updates the ticks.max and ticks.min chart properties without updating the chart
  10. unselectPoints(update); //boolean that says if the chart is going to update or not
  11. resetZoom(update, update_options); //boolean that says if the chart is going to update or not. update_options is the update options from chartjs update() function
  12. removeEventListeners(); //removes all event listeners added by this plugin
  13. destroy(); //remove all external references

Limitations

  • For now, this plugin only works for linear x axis type.