javascript - 如何在剑道径向规中更改指针长度

您可以通过设置cap:size值来更改指针的宽度，但是我需要更改指针的长度，以便它们以代表5个不同时间点的分层方式出现。如何才能做到这一点？

function createGauge() {
  $("#gauge").kendoRadialGauge({
    pointer: [{
      value: 10,
      color: "#c20000",
      cap: {
        size: 0.19
      }
    }, {
      value: 70,
      color: "#ff7a00",
      cap: {
        size: 0.15
      }
    }, {
      value: 140,
      color: "#ffc700",
      cap: {
        size: 0.11
      }
    }, {
      value: 350,
      color: "#ffe700",
      cap: {
        size: 0.07
      }
    }, {
      value: 313,
      color: "#fff700",
      cap: {
        size: 0.03
      }
    }],
    scale: {
      minorUnit: 5,
      startAngle: 90,
      endAngle: 450,
      max: 360
    }
  });
}
$(document).ready(function() {
  createGauge();

  $("#example .slider").each(function() {
    $(this).kendoSlider({
      min: 0,
      max: 360,
      showButtons: true,
      change: function() {
        var id = this.element.attr("id");
        var pointerIndex = id.substr(id.length - 1);
        var gauge = $("#gauge").data("kendoRadialGauge");
        gauge.pointers[pointerIndex].value(this.value());
      }
    });
  });

  $("#getValues").click(function() {
    alert("All values: " + $("#gauge").data("kendoRadialGauge").allValues().join(", "));
  });

  $("#setValues").click(function() {
    var values = $("#newValues").val().split(",");

    values = $.map(values, function(val) {
      return parseInt(val);
    });

    $("#gauge").data("kendoRadialGauge").allValues(values);
  });

  $(document).bind("kendo:skinChange", function(e) {
    createGauge();
  });
});

#gauge {
  width: 33em;
  height: 33em;
  //margin: 0 auto 0;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<div id="gauge-container">
  <div id="gauge"></div>
</div>

最佳答案

据Telerik说，你做不到。至少对于当前版本。
http://www.telerik.com/forums/change-length-of-radial-gauge-pointer