0

我正在创建一个 Jquery Gauge。这样，弧的最大值是'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