0

値を設定することでポインターの幅を変更できますが、ポインター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>

4

3 に答える 3

1

Telerikによると、できません。少なくとも現在のバージョンでは。 http://www.telerik.com/forums/change-length-of-radial-gauge-pointer

于 2015-08-18T02:43:52.310 に答える
0

以下の ANGULARJS で使用したコードは、ポインターの長さを短縮するために使用されます。

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

ラベルの位置を「外側」として使用しました。

于 2016-02-23T04:46:09.033 に答える