Kendo UI图表：动态调整标签数量

Question

我有一个可缩放的区域图表和每个数据点的x轴标签。当图表加载时，标签太多了，因此我设置了step选项:

categoryAxis: {
    name: 'CatAxis',
    categories: graphLabels,
    step: 30
}

但是当用户缩放时，我需要减少步骤的数量，否则将不会显示任何标签。 因此，我订阅了zoomEnd事件并计算所需的步数：

function onZoomEnd(e) {
    var xRange = e.axisRanges.CatAxis;
    if (xRange) {
    var diff = xRange.max - xRange.min;
    var step = 1;
    while (diff / step > 6) {
        step++;
    }
    e.sender.setOptions({ categoryAxis: { labels: { step: step } } });
}

但是在此处设置选项会导致图表刷新，从而失去其缩放级别。最终目标是显示合理数量的标签，而不会在缩放时重叠或消失。有什么想法可以实现这一目标吗？

- user2900970

---

你能提供一个可工作的例子吗？比如 jsfiddle/codepen/snippet？ - Dekel

那么 this.setOptions({ categoryAxis: { labels: { step: step } } }); 呢？ - Kiran Shakya

Answer 1

您可以使用文档中的以下示例来维护图表的缩放级别。

https://docs.telerik.com/kendo-ui/knowledge-base/maintain-pan-zoom-state

<button id="rebind">Rebind Chart</button>
<div id="chart"></div>
<script>
  // Sample data
  var data = [];
  for (var i = 0; i < 100; i++) {
    var val = Math.round(Math.random() * 10);
    data.push({
      category: "C" + i,
      value: val
    });
  }

  function createChart() {
    var axisMin = 0;
    var axisMax = 10;

    function updateRange(e) {
      var axis = e.sender.getAxis('axis')
      var range = axis.range()
      axisMin = range.min;
      axisMax = range.max;
    }

    function restoreRange(e) {
      e.sender.options.categoryAxis.min = axisMin;
      e.sender.options.categoryAxis.max = axisMax;
    }

    $("#chart").kendoChart({
      renderAs: "canvas",
      dataSource: {
        data: data
      },
      categoryAxis: {
        name: "axis",
        min: axisMin,
        max: axisMax,
        labels: {
          rotation: "auto"
        }
      },
      series: [{
        type: "column",
        field: "value",
        categoryField: "category"
      }],
      pannable: {
        lock: "y"
      },
      zoomable: {
        mousewheel: {
          lock: "y"
        },
        selection: {
          lock: "y"
        }
      },
      zoom: updateRange,
      drag: updateRange,
      dataBound: restoreRange
    });
  }

  $("#rebind").click(function() {
    $("#chart").data("kendoChart").dataSource.read();
  });

  $(document).ready(createChart);
</script>

- A.Awada

---

请在文档中包含引用。 - Ergis