以角度縮放和平移圖表

Question

我有這個插件的角度（v5）問題：ng2-charts（來自charts.js）chartjs-plugin-zoomhammer.js

我有一個簡單的圖表，我想對此進行縮放和平移，但它不起作用。

我在這里上傳我的代碼，以便您可以檢查......我想我已經導入了我需要的所有東西，但我不明白為什么它不去。 你能幫我嗎？

非常感謝！

Answer 1

要在 ng2-charts 上具有功能性平移和縮放功能，您需要執行以下操作：

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,
       ...
     ]
   }

如您所見，無需在@NgModule注釋的declarations或任何其他部分中添加任何內容。

3. 在圖表配置中添加縮放選項要使用 ng2-chart 設置圖表，您必須使用類似以下代碼段的內容創建模板：

  <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. 水平平移僅適用於散點圖

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

一些鏈接

歸功於我獲得信息的地方：

• 官方hammerjr 網站在這里訓練你的手勢。 起初，如果您有觸摸板，它們並不完全直觀。
• charts-plugin-zoom 的官方 readme.md顯示了zoom配置的完整語法
• ng2-charts 可以與 Chart.js 縮放插件一起使用嗎？ 關於如何使用縮放插件的討論。