javascript - 是否可以在剑道图表上设置最小和最大缩放？由于许多项目，我的图表在缩小时使类别轴标签难以辨认

Question

我有一个 kendo Angular 图表组件，我需要在其上设置最小缩放，以便在某个点之后，缩小不是一种选择，否则类别轴标签变得难以阅读。同样，我也想设置最大缩放。您可以在 gif 中看到图表问题。

使用驱动器是因为文件大小> 2 Mb，并且堆栈溢出不允许这样做。

https://drive.google.com/file/d/1aOXLmnCgOIUb7fVT5pkQ6lbWb8IvAxhK/view

标签： javascriptangularkendo-ui-angular2

Answer 1

您可以使用该zoom事件。您无法检查缩放级别，但您可以检查查看范围，并在范围超出您的偏好时阻止缩放操作。

假设类别是数字，您最多希望看到 20 个类别。

以下是完成您想做的事情的要点：

1. 命名您的类别轴：

   public categoryAxis: any = {
       min: 10,
       max: 20,
       name: "test"
   };
   

2. 将事件处理程序添加到kendo-chart组件：

   (zoom)=zoomHandler($event)
   

3. 将事件处理函数添加到组件中：

   public zoomHandler(e) {
       console.log("zoom", e);
   
       // Prevent the zoom action if the axis range is greater than 20 (in this example, the categories are numbers)
       if (e.axisRanges.test.max - e.axisRanges.test.min > 20) {
           e.preventDefault();
       }
   }
   

你可以在这里看到一个例子。