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 } } });
}

但是在此处设置选项会导致图表刷新，从而失去其缩放级别。最终目标是显示合理数量的标签，并且在放大和缩小时它们不会重叠或消失。任何想法如何实现这一目标？

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>