0

Jqueryゲージを作成しています。このように、円弧の最大値は「100」ですが、ポインターの値を「110」に設定すると、画像のように円弧の制限をオーバーフローします。
ポインターが 100 の制限を超えています

どうにかしてこの問題を解決するか、ポインタの「最大値」/「範囲」を設定しますか?
注: ポインターは弧の限界を超えることはできません。

これは私のコードです:

<!DOCTYPE html>
<html>
<head>
<title>Gauge 8</title>
<meta name="viewport" content="width=1024, maximum-scale=1">
<link href="jquery-gauge.css" type="text/css" rel="stylesheet">
<style>
    .demo1 {
        position: relative;
        width: 10vw;
        height: 10vw;
        box-sizing: border-box;
        float:left;
        margin:20px
    }
    .demo3 {
        position: relative;
        width: 9vw;
        height: 9vw;
        box-sizing: border-box;
        float:left;
        margin:20px
    }
</style>
</head>
<body>
 <div class="gauge3 demo3"></div>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script type="text/javascript" src="jquery-gauge.min.js"></script>

 <script type="text/javascript">
     $('.gauge3').gauge({
         values: {
             0 : '0',
             25: '25',
             50: '50',
             75: '75',
             100: '100'
         },
         colors: {
             0 : 'green',
             30: 'orange',
             40: 'red'
         },
         angles: [
             180,
             360
         ],
         lineWidth: 9,
         arrowWidth: 5,
         arrowColor: 'black',
         inset:true,

         value: 110
     });
 </script>

 <div class="gauge1 demo1"></div>

 </body>
 </html>
4

0 に答える 0