Kendo UI for Angular Chart使用户能够通过对组件应用平移和缩放来查看特定范围。

Kendo UI for Angular最新版工具下载

要执行平移，请拖动图表的绘图区域。

要执行缩放，请执行以下任一操作：

• 鼠标滚轮（桌面）或捏缩放（移动），或
• 按住 Shift 键并选择一个区域。

要启用平移和缩放功能，请使用pannable 和 zoomable选项。

app.component.ts

data.ts

app.module.ts

main.ts

您可以使用锁定配置来防止轴的平移和缩放：

• 要禁用垂直方向的平移和缩放，请将 pannable.lock、zoomable.mousewheel.lock 和 zoomable.selection.lock 选项设置为'y'。
• 要禁用水平方向的平移和缩放，请将 pannable.lock、zoomable.mousewheel.lock 和 zoomable.selection.lock 选项设置为'x'。

app.component.ts

data.ts

app.module.ts

main.ts

默认情况下，单击鼠标滚轮会将轴范围扩大或缩小 30%。 要将缩放率设置为不同的值，请将缩放率设置为 0.01 到 0.9（1% 到 90%）范围内的数字。

app.component.ts

data.ts

app.module.ts

main.ts

平移和缩放事件

当用户平移或缩放图表时，组件会触发以下事件，其中包含修改后的轴范围。

• dragStart—当图表开始平移时触发。 如果您阻止该事件，图表将停止平移。
• drag—在图表平移时触发。 如果您阻止该事件，则当前坐标轴范围的更改也将被阻止。
• dragEnd—在图表停止平移后触发。
• zoomStart—当图表开始缩放时触发。 如果您阻止该事件，图表将停止缩放。
• zoom—图表缩放时触发。 如果您阻止该事件，则当前坐标轴范围的更改也将被阻止。
• zoomEnd—当图表停止缩放时触发。

为了使轴包含在axisRanges 字段中，请为轴提供名称。 如果轴范围未更改，则拖动和缩放事件将不包括它。

app.component.ts

data.ts

app.module.ts

main.ts

Kendo UI for Angular是Kendo UI系列商业产品的最新产品。Kendo UI for Angular是专用于Angular开发的专业级Angular组件。telerik致力于提供纯粹的高性能Angular UI组件，无需任何jQuery依赖关系。