以角度缩放图表

Question

我对此插件的angular（v5）问题：ng2-charts（来自charts.js）chartjs-plugin-zoomHammer.js

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

我上传了我的code here，因此您可以检查...我想我已经导入了所有我需要的东西，但我不明白为什么它没有成功。你能帮我吗？

非常感谢！

Answer 1

要在ng2图上具有平移和缩放功能，这是您需要做的：

1. 使用npm安装依赖项：hammerjs和chartjs-plugin-zoom
2. 将依赖项导入到模块中。
3. 在图表配置的pan部分中添加zoom和plugin配置。
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设置图表，您必须使用以下代码段创建模板：

  <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?关于如何使用缩放插件的讨论。