图表js- 插图正弦

Chart.js的缩放和平板插件 3.0.0-β.13.

用于图.js 2.6.0至 2.9.x 支持,使用 本插件的0.7.7版本。 。 。 .

普宁可以通过鼠标或用指来完成. 缩放是通过鼠标轮子或一捏手势完成的. 锤子.js 用于手势识别.

生活代码DEMO

安装

运行 npm install --save chartjs-plugin-zoom 要安装 npm。 。 。 .

如果以下列方式列入 <script> 标记,确保包含 Hammer.js 还:

<script src="https://cdn.jsdelivr.net/npm/chart.js@next"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@next"></script>

配置

要配置缩放和泛插件,你可以简单地在图表配置中添加新的配置选项.

plugins: {
 zoom: {
  // Container for pan options
  pan: {
   // Boolean to enable panning
   enabled: true,

   // Panning directions. Remove the appropriate direction to disable
   // Eg. 'y' would only allow panning in the y direction
   // A function that is called as the user is panning and returns the
   // available directions can also be used:
   //   mode: function({ chart }) {
   //     return 'xy';
   //   },
   mode: 'xy',

   // Which of the enabled panning directions should only be available
   // when the mouse cursor is over one of scale.
   overScaleMode: 'xy',

   rangeMin: {
    // Format of min pan range depends on scale type
    x: null,
    y: null
   },
   rangeMax: {
    // Format of max pan range depends on scale type
    x: null,
    y: null
   },

   // On category scale, factor of pan velocity
   speed: 20,

   // Minimal pan distance required before actually applying pan
   threshold: 10,

   // Function called while the user is panning
   onPan: function({chart}) { console.log(`I'm panning!!!`); },
   // Function called once panning is completed
   onPanComplete: function({chart}) { console.log(`I was panned!!!`); },
   // Function called when pan fails because modifier key was not detected.
   // event is the a hammer event that failed - see https://hammerjs.github.io/api#event-object
   onPanRejected: function({chart, event}) { console.log(`I didn't start panning!`); }
  },

  // Container for zoom options
  zoom: {
   // Boolean to enable zooming
   enabled: true,

   // Enable drag-to-zoom behavior
   drag: true,

   // Drag-to-zoom effect can be customized
   // drag: {
   //   borderColor: 'rgba(225,225,225,0.3)'
   //   borderWidth: 5,
   //   backgroundColor: 'rgb(225,225,225)',
   //   animationDuration: 0
   // },

   // Zooming directions. Remove the appropriate direction to disable
   // Eg. 'y' would only allow zooming in the y direction
   // A function that is called as the user is zooming and returns the
   // available directions can also be used:
   //   mode: function({ chart }) {
   //     return 'xy';
   //   },
   mode: 'xy',

   // Which of the enabled zooming directions should only be available
   // when the mouse cursor is over one of scale.
   overScaleMode: '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
   },

   // Speed of zoom via mouse wheel
   // (percentage of zoom on a wheel event)
   speed: 0.1,

   // Minimal zoom distance required before actually applying zoom
   threshold: 2,

   // On category scale, minimal zoom level before actually applying zoom
   sensitivity: 3,

   // Function called while the user is zooming
   onZoom: function({chart}) { console.log(`I'm zooming!!!`); },
   // Function called once zooming is completed
   onZoomComplete: function({chart}) { console.log(`I was zoomed!!!`); },
   // Function called when wheel input occurs without modifier key
   onZoomRejected: function({chart, event}) { console.log(`I didn't start zooming!`); }
  }
 }
}

API 密码

图表. resetZoom ()

程序将缩放重排到默认状态 。 见 (原始内容存档于2019-03-26). sample/zoom-time.html 举个例子.

文档

您可以为 Chart.js 找到文档 联合国。 。 。 .

此插件的例子可见于 样本文件夹。 。 。 .

在v. 4.0之前,这个插件被称为"Chart.Zoom.js". 旧版本在npm上仍可用此名.

捐款

在向项目提交问题或拉动请求之前,请花点时间查看一下 提供指南 先说.

许可证

图js-plugin-zoom.js 可在 麻省理工学院许可证。 。 。 .