以角度缩放和平移图表

Question

我在这个插件的角度(v5)上遇到了问题： NG2-图表 ( 来自图表.js) chartjs-plugin-zoom 锤子.js

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

我在这里上传我的代码，以便您可以检查... 我想我已经导入了我需要的一切，我不明白为什么它不去。 你可以帮我吗？

谢谢！

Answer 1

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

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

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

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>

在相应的类中添加具有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 网站 在这里训练你的手势。起初，如果您有触摸板，它们并不完全直观。
• 图表插件缩放的官方 readme.md 显示了zoom配置的完整语法
• ng2-charts可以与图表.js缩放插件一起使用吗？关于如何使用缩放插件的讨论。