javascript - 剑道UI图表: adjust label amount dynamically

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>