在 angular 的图表上缩放和平移

Question

我在 angular ( v5) 上遇到此插件的问题： ng2-图表（来自 charts.js） chartjs-插件缩放 hammer.js

我有一个简单的图表，我想对其进行缩放和平移，但它不起作用。

我上传了我的 code here 这样你就可以检查... 我想我已经导入了我需要的一切，但我不明白为什么它没有导入。你能帮帮我吗？

非常感谢！

Answer 1

要在您的 ng2-图表上实现功能性的平移和缩放，您需要做的是：

使用npm安装依赖项：hammerjs和chartjs-plugin-zoom
将依赖项导入您的模块。
在图表配置的plugin部分添加pan和zoom配置。
水平缩放和平移仅适用于散点图

说起来容易做起来难，在添加缩放和平移之前，请确保您的项目中有一个可用的 ng2-chart。否则你永远不知道出了什么问题。

1.安装所需的插件

在项目的根文件夹中执行以下命令：

   npm install hammerjs
   npm install charts-plugin-zoom

2。将插件导入您的模块

插件安装完成后，可以查看这两个文件夹是否存在：

node_modules/hammerjs
node_modules/chartjs-plugin-zoom

您需要将它们包含在您的模块中。例如，您可以在 app.module.ts 中添加两个导入：

   import 'hammerjs';
   import 'chartjs-plugin-zoom';

   @NgModule({
     declarations: [
       AppComponent,
       ...
     ]
   }

如您所见，无需在 declarations 或 @NgModule 注释的任何其他部分中添加任何内容。

3。在图表配置中添加缩放选项 要使用 ng2-chart 设置图表，您必须使用类似于以下代码段的内容创建模板：

  <canvas baseChart
      chartType="bar"
      [datasets]="dataSets"
      [labels]="labels"
      [options]="options"
      legend="true">
  </canvas>

在相应的 class 中添加一个带有 zoom 部分的 plugin 元素。注意 zoom 嵌套两次：

import { ChartDataSets, ChartOptions } from 'chart.js';
...
...
export class YourChartComponent {
  ...
  public options: ChartOptions = {
      legend: {
        ...
      },
      scales: {
         ...
      },
      plugins: {
        zoom: {
          pan: {
            enabled: true,
            mode: 'xy'
          },
          zoom: {
            enabled: true,
            mode: 'xy'
          }
        }
      }
    };
  ...
  ...
}

4.水平平移仅适用于散点图

通常，上面的示例只会垂直平移和缩放。

部分链接

致谢：

Official hammerjr web site 在这里训练你的手势。一开始，如果您有触摸板，它们并不是很直观。
Official readme.md of charts-plugin-zoom 显示 zoom 配置的完整语法
Can ng2-charts work with Chart.js zoom plugin?讨论如何使用缩放插件。

在 angular 的图表上缩放和平移

zoom and pan on charts in angular

hammer.js

chart.js

ng2-charts

angular