angular - 以 Angular 缩放和平移图表

Question

我有这个插件的 Angular (v5)问题:
ng2-charts(来自charts.js)
chartjs-插件-缩放
锤子.js

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

我上传我的code here所以你可以检查...
我想我已经进口了我需要的一切，我不明白为什么它不去。
你能帮助我吗？

非常感谢!

Answer 1

要在您的 ng2 图表上进行功能性平移和缩放，您需要执行以下操作:

使用npm安装依赖:hammerjs和 chartjs-plugin-zoom

将依赖项导入您的模块。

添加 pan和 zoom plugin 中的配置图表配置部分。

水平缩放和平移仅适用于散点图

说起来容易做起来难，在添加缩放和平移之前，请确保您的项目中有一个工作 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>

在相应的类中添加 plugin带有 zoom 的元素部分。注意 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?关于如何使用缩放插件的讨论。