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

Question

您可以通过设置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>

Answer 1

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

Answer 2

是的，您现在可以更改指针长度。pointer.length：

基于到刻度的距离的指针长度（百分比）。默认长度 1 表示指针正好到达刻度。接受 0.1 到 1.5 之间的值。

function createGauge() {
  $("#gauge").kendoRadialGauge({
    pointer: [{
      value: 10,
      color: "#c20000",
      cap: {
        size: 0.19
      },
      length: 1,
    }, {
      value: 70,
      color: "#ff7a00",
      cap: {
        size: 0.15
      },
      length: 0.8,
    }, {
      value: 140,
      color: "#ffc700",
      cap: {
        size: 0.11
      },
      length: 0.6,
    }, {
      value: 350,
      color: "#ffe700",
      cap: {
        size: 0.07
      },
      length: 0.5,
    }, {
      value: 313,
      color: "#fff700",
      cap: {
        size: 0.03
      },
      length: 0.4,
    }],
    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://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.511/js/kendo.all.min.js"></script>
<div id="gauge-container">
  <div id="gauge"></div>
</div>

Answer 3

我在 ANGULARJS 中使用了下面的代码，用于减少指针的长度。

gauge.options.scale.labels = { 
       border: {  width:13  } 
 };

我将标签位置用作“外部”。