Question

我有一个评分数据。

优秀= 16
好= 38
平均值= 25
不满意= 5

我正在使用kuma-gauge Jquery库来创建Meter Gauge，它对各个等级分别工作正常，我正在跟踪此链接。 Kuma-Gauge

附上我得到的结果的图片。

我想将所有结果合并到一个仪表中，然后将指针停在最高值，在这种情况下，将其停在Good上，因为Good获得最高值。图片附有我要寻找的

有可能吗？与现有或任何其他图书馆？很想得到一些技巧。

我的代码：

<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="~/Content/kuma-gauge.jquery.js"></script>

<div class="row">
&nbsp;
&nbsp;
<div class="col-sm-4">
    Overall <b style="font-size:large ">Excellent</b> Rating on all services is <b style="font-size:large ">
        16.3575042159%
    </b>
    <div class="js-gauge demo gauge">

    </div>
</div>

<div class="col-sm-4">
    Overall <b style="font-size:large ">
        Good
    </b> on all services is <b style="font-size:large ">
        38.240917782%
    </b>
    <div class="js-gauge demo1 gauge">

    </div>
</div>

<div class="col-sm-4">
    Overall <b style="font-size:large ">
        Average
    </b> Rating on all services is <b style="font-size:large ">
        25.621414914%
    </b>
    <div class="js-gauge demo2 gauge">

    </div>
</div>

  <script type="text/javascript">
 $('.demo').kumaGauge({
  // dynamic value-up<a href="https://www.jqueryscript.net/time-clock/">date</a>. just for sample.
     value: 16,
     fill: '#31A246',
     gaugeWidth: 40,
     radius: 100,

 });
</script>

<script type="text/javascript">
 $('.demo1').kumaGauge({
  // dynamic value-up<a href="https://www.jqueryscript.net/time-clock/">date</a>. just for sample.
     value: 39,
     fill: '#28F14D',
     gaugeWidth: 40,
     radius: 100,


 });
</script>

<script type="text/javascript">
 $('.demo2').kumaGauge({
  // dynamic value-up<a href="https://www.jqueryscript.net/time-clock/">date</a>. just for sample.
     value: 26,
     fill: '#98FB98',
     gaugeWidth: 40,
     radius: 100,
 });
</script>

jQuery gauge kuma-gauge定制

0 个答案: