Question

我正在尝试在放大Kendo UI时锁定Y轴。根据文档，我应该能够这样做： zoomable：{mousewheel：{lock：“y”}}

但不知何故它无法正常工作，即使是剑道的演示也有同样的问题，请参阅 http://demos.telerik.com/kendo-ui/bar-charts/pan-and-zoom 当我放大时，您可以看到y轴最大值从12变为10和更低。

我是否正确理解了文档或者剑道存在错误？

谢谢！

Answer 1

y轴不是缩放，而是根据当前可见的条形自动计算最大值。您可以避免这样设置valueAxis.max值。在示例中，添加

valueAxis:{
  max: 12
},

Answer 2

您可以看到，如果放大高度为10的条形，则y轴最大值保持为12。

您所看到的行为不是缩放，而是更改轴最大值以更好地适应您在视图中看到的条形高度。您可以看到轴的最小值保持为0的差异，但是当您在y轴上启用缩放时，最小值也会发生变化。

您可以通过设置永久轴最大值来避免此行为：

valueAxis: {
  max: number
}

这种行为的原因是，如果您添加/删除/更改您的值，您将希望网格适应新的栏，而不是让它们超出图表的顶部。只有在第一次显示图表后数据不会改变时，设置最大y轴值才是个好主意。

Answer 3

设置valueAxis.max的答案就在那里。但是我的问题是，当达到最大缩放小数时出现，因为y轴根据当前可见的条形而变化。如果我执行valueAxis.labels.format: '{0:0}'，是的，小数点消失了，但是在最大缩放比例下，似乎条形图未正确地对准y轴。实际上，条高度/水平正确，y轴标签错误，缺少小数点。关键是设置valueAxis.majorUnit。演示一下，这是我为jQuery制作Kendo Chart的选项。注释/取消注释valueAxis.labels和valueAxis.majorUnit，以查看区别。

{
  series: [{
    name: 'Grand Total',
    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    type: 'column',
  }],
  zoomable: {
    mousewheel: {
      lock: 'y',
    },
    selection: {
      lock: 'y',
    },
  },
  pannable: {
    lock: 'y',
  },
  valueAxis: {
    max: 12,
    // labels: {
    //     format: '{0:0}',
    // },
    majorUnit: 1,
  },
  categoryAxis: {
    categories: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
  },
}

希望这会有所帮助。

Kendo UI缩放锁Y轴不工作

3 个答案: