Настройка jQuery gauge kuma-gauge - PullRequest
Новая
       60

Настройка jQuery gauge kuma-gauge

0 голосов
/ 27 декабря 2018

У меня есть данные оценок.

  1. Отлично = 16
  2. Хорошо = 38
  3. Среднее = 25
  4. Неудовлетворительно = 5

Я использую библиотеку jquery kuma-gauge для создания Meter Gauge, и она работает нормальнопо отдельным рейтингам отдельно я перехожу по этой ссылке. Kuma-Gauge

Изображение прилагается к полученному результату.enter image description here

Я хочу объединить все результаты в один метр и остановить стрелку на самом высоком значении, в этом случае остановите его на Good, поскольку Good получает наибольшее значение.Изображение прилагается, что я ищу enter image description here

Возможно ли это?с существующей или любой другой библиотекой?хотел бы получить некоторые уловки.

Мой код: 

<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>
...