以角度缩放和平移图表

Question

我在使用这个插件时遇到了 Angular (v5) 问题： ng2-charts（来自charts.js） chartjs-插件-缩放 锤子.js

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

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

非常感谢！

Answer 1

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

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

说起来容易做起来难，在添加缩放和平移之前，请确保您的项目中有一个工作 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 设置图表，您必须使用以下 sn-p 创建模板：

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

在相应的类中添加一个带有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?关于如何使用缩放插件的讨论。