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

【问题标题】：How to change pointer length in Kendo radial gauge如何更改剑道径向量规中的指针长度
【发布时间】：2015-02-18 16:42:29
【问题描述】：

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

【问题讨论】：

标签： javascript css kendo-ui transform kendo-gauge

【解决方案1】：

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

【讨论】：

【解决方案2】：

我在ANGULARJS下面使用的代码是用来减少指针长度的。

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

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

【讨论】：

【解决方案3】：

是的，您现在可以更改指针长度。 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>

【讨论】：