爲網頁添加一個值部分

我有幾個徑向和線性儀表用於我正在構建的儀表板。我希望能夠打印出每個量表讀數旁邊的數值。有沒有什麼功能可以在HTML或CSS中做到這一點？爲網頁添加一個值部分

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Data Metrics</title> 
    <meta charset="utf-8"> 
    <title>Untitled</title> 

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.rtl.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.default.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.mobile.all.min.css"> 

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2015.2.624/js/jszip.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script></head> 

    <body style="background-color: black"> 

    <table border= 2px> 
     <tr> 
     <td style="color: White">Overall Risk</td> 
     <td style="width: 300px"> 
      <div id="overall_gauge"></div> 
      <script> 
      $("#overall_gauge").kendoRadialGauge({ 
       pointer: { 
       color: "Red", 
       value: 71.8, 
       }, 

       scale: { 
       majorUnit: 10, 
       majorTicks: { 
        color: "white", 
       }, 
       minorUnit: 5, 
       minorTicks: { 
        color: "white", 
       }, 
       startAngle: -40, 
       endAngle: 220, 
       max: 100, 
       labels: { 
        color: "white", 
        template: "#= value #%" 
       }, 
       ranges: [ 
        { 
        from: 0, 
        to: 20, 
        color: "Red" 
        }, { 
        from: 20, 
        to: 40, 
        color: "#ff6600" 
        }, 
        { 
        from: 40, 
        to: 60, 
        color: "Orange" 
        }, 
        { 
        from: 60, 
        to: 80, 
        color: "Yellow" 
        } 
        , 
        { 
        from: 80, 
        to: 100, 
        color: "Green" 
        } 
       ] 
       } 
      }); 
      </script> 
     </td> 
     </tr> 
    </table> 

    <table border="2px"> 
     <tr> 
     <td style="color:white">Security Systems</td> 
     <td> 
      <div id="1st_gauge"></div> 
      <script> 
      $("#1st_gauge").kendoRadialGauge({ 
       pointer: { 
       color: "Red", 
       value: 92, 
       }, 

       scale: { 
       majorTicks: { 
        color: "white", 
       }, 
       minorUnit: 5, 
       minorTicks: { 
        color: "white", 
       }, 
       startAngle: -30, 
       endAngle: 210, 
       max: 100, 
       labels: { 
        color: "white", 
        template: "#= value #%" 
       }, 
       ranges: [ 
        { 
        from: 0, 
        to: 20, 
        color: "Red" 
        }, { 
        from: 20, 
        to: 40, 
        color: "#ff6600" 
        }, 
        { 
        from: 40, 
        to: 60, 
        color: "Orange" 
        }, 
        { 
        from: 60, 
        to: 80, 
        color: "Yellow" 
        } 
        , 
        { 
        from: 80, 
        to: 100, 
        color: "Green" 
        } 
       ] 
       } 
      }); 

      </script> 
     </td> 
     <td style="color:white">Patching</td> 
     <td> 
     <div id="2nd_gauge"></div> 
     <script> 
     $("#2nd_gauge").kendoRadialGauge({ 
      pointer: { 
      color: "Red", 
      value: 100, 
      }, 

      scale: { 
      majorTicks: { 
       color: "white", 
      }, 
      minorUnit: 5, 
      minorTicks: { 
       color: "white", 
      }, 
      startAngle: -30, 
      endAngle: 210, 
      max: 100, 
      labels: { 
       color: "white", 
       template: "#= value #%" 
      }, 
      ranges: [ 
       { 
       from: 0, 
       to: 20, 
       color: "Red" 
       }, { 
       from: 20, 
       to: 40, 
       color: "#ff6600" 
       }, 
       { 
       from: 40, 
       to: 60, 
       color: "Orange" 
       }, 
       { 
       from: 60, 
       to: 80, 
       color: "Yellow" 
       } 
       , 
       { 
       from: 80, 
       to: 100, 
       color: "Green" 
       } 
      ] 
      } 
     }); 

     </script> 
     </td> 
     <td style="color:white">Congifuration</td> 
     <td> 
     <div id="3rd_gauge"></div> 
     <script> 
     $("#3rd_gauge").kendoRadialGauge({ 
      pointer: { 
      color: "Red", 
      value: 80, 
      }, 

      scale: { 
      majorTicks: { 
       color: "white", 
      }, 
      minorUnit: 5, 
      minorTicks: { 
       color: "white", 
      }, 
      startAngle: -30, 
      endAngle: 210, 
      max: 100, 
      labels: { 
       color: "white", 
       template: "#= value #%" 
      }, 
      ranges: [ 
       { 
       from: 0, 
       to: 20, 
       color: "Red" 
       }, { 
       from: 20, 
       to: 40, 
       color: "#ff6600" 
       }, 
       { 
       from: 40, 
       to: 60, 
       color: "Orange" 
       }, 
       { 
       from: 60, 
       to: 80, 
       color: "Yellow" 
       } 
       , 
       { 
       from: 80, 
       to: 100, 
       color: "Green" 
       } 
      ] 
      } 
     }); 

     </script> 
     </td> 
     <td style="color:white">Network</td> 
     <td> 
     <div id="4th_gauge"></div> 
     <script> 
     $("#4th_gauge").kendoRadialGauge({ 
      pointer: { 
      color: "Red", 
      value: 60, 
      }, 

      scale: { 
      majorTicks: { 
       color: "white", 
      }, 
      minorUnit: 5, 
      minorTicks: { 
       color: "white", 
      }, 
      startAngle: -30, 
      endAngle: 210, 
      max: 100, 
      labels: { 
       color: "white", 
       template: "#= value #%" 
      }, 
      ranges: [ 
       { 
       from: 0, 
       to: 20, 
       color: "Red" 
       }, { 
       from: 20, 
       to: 40, 
       color: "#ff6600" 
       }, 
       { 
       from: 40, 
       to: 60, 
       color: "Orange" 
       }, 
       { 
       from: 60, 
       to: 80, 
       color: "Yellow" 
       } 
       , 
       { 
       from: 80, 
       to: 100, 
       color: "Green" 
       } 
      ] 
      } 
     }); 

     </script> 
     </td> 
     <td style="color:white">Applications</td> 
     <td> 
     <div id="5th_gauge"></div> 
     <script> 
     $("#5th_gauge").kendoRadialGauge({ 
      pointer: { 
      color: "Red", 
      value: 35, 
      }, 

      scale: { 
      majorTicks: { 
       color: "white", 
      }, 
      minorUnit: 5, 
      minorTicks: { 
       color: "white", 
      }, 
      startAngle: -30, 
      endAngle: 210, 
      max: 100, 
      labels: { 
       color: "white", 
       template: "#= value #%" 
      }, 
      ranges: [ 
       { 
       from: 0, 
       to: 20, 
       color: "Red" 
       }, { 
       from: 20, 
       to: 40, 
       color: "#ff6600" 
       }, 
       { 
       from: 40, 
       to: 60, 
       color: "Orange" 
       }, 
       { 
       from: 60, 
       to: 80, 
       color: "Yellow" 
       } 
       , 
       { 
       from: 80, 
       to: 100, 
       color: "Green" 
       } 
      ] 
      } 
     }); 

     </script> 
      </td> 
     <td style="color:white">Awareness</td> 
     <td> 
     <div id="6th_gauge"></div> 
     <script> 
     $("#6th_gauge").kendoRadialGauge({ 
      pointer: { 
      color: "Red", 
      value: 55, 
      }, 

      scale: { 
      majorTicks: { 
       color: "white", 
      }, 
      minorUnit: 5, 
      minorTicks: { 
       color: "white", 
      }, 
      startAngle: -30, 
      endAngle: 210, 
      max: 100, 
      labels: { 
       color: "white", 
       template: "#= value #%" 
      }, 
      ranges: [ 
       { 
       from: 0, 
       to: 20, 
       color: "Red" 
       }, { 
       from: 20, 
       to: 40, 
       color: "#ff6600" 
       }, 
       { 
       from: 40, 
       to: 60, 
       color: "Orange" 
       }, 
       { 
       from: 60, 
       to: 80, 
       color: "Yellow" 
       } 
       , 
       { 
       from: 80, 
       to: 100, 
       color: "Green" 
       } 
      ] 
      } 
     }); 

     </script> 
      </td> 
     </tr> 
    </table> 
    <table border = "2px" align="right"> 
     <tr> 
     <td style="color:yellow">Infrastructure Controls</td> 
     <td style="width: 500px;height:250px"> 
      <div id="linear-gauge11"></div> 
      <script> 
      $("#linear-gauge11").kendoLinearGauge({ 
       pointer: { 
       color: "Blue", 
       value: 15, 
       }, 
       scale: { 
       vertical: false, 
       majorTicks: { 
        color: "white", 
       }, 
       minorUnit: 5, 
       minorTicks: { 
        color: "white", 
       }, 
       max: 100, 
       labels: { 
        color: "white", 
        template: "#= value #%" 
       }, 
       ranges: [ 
        { 
        from: 0, 
        to: 20, 
        color: "Red" 
        }, { 
        from: 20, 
        to: 40, 
        color: "#ff6600" 
        }, 
        { 
        from: 40, 
        to: 60, 
        color: "Orange" 
        }, 
        { 
        from: 60, 
        to: 80, 
        color: "Yellow" 
        } 
        , 
        { 
        from: 80, 
        to: 100, 
        color: "Green" 
        } 
       ] 
       } 
      }); 
      </script> 
      <div id="linear-gauge12"></div> 
      <script> 
      $("#linear-gauge12").kendoLinearGauge({ 
       pointer: { 
       color: "Blue", 
       value: 45, 
       }, 
       scale: { 
       vertical: false, 
       majorTicks: { 
        color: "white", 
       }, 
       minorUnit: 5, 
       minorTicks: { 
        color: "white", 
       }, 
       max: 100, 
       labels: { 
        color: "white", 
        template: "#= value #%" 
       }, 
       ranges: [ 
        { 
        from: 0, 
        to: 20, 
        color: "Red" 
        }, { 
        from: 20, 
        to: 40, 
        color: "#ff6600" 
        }, 
        { 
        from: 40, 
        to: 60, 
        color: "Orange" 
        }, 
        { 
        from: 60, 
        to: 80, 
        color: "Yellow" 
        } 
        , 
        { 
        from: 80, 
        to: 100, 
        color: "Green" 
        } 
       ] 
       } 
      }); 
      </script> 
      <div id="linear-gauge13"></div> 
      <script> 
      $("#linear-gauge13").kendoLinearGauge({ 
       pointer: { 
       color: "Blue", 
       value: 35, 
       }, 
       scale: { 
       vertical: false, 
       majorTicks: { 
        color: "white", 
       }, 
       minorUnit: 5, 
       minorTicks: { 
        color: "white", 
       }, 
       max: 100, 
       labels: { 
        color: "white", 
        template: "#= value #%" 
       }, 
       ranges: [ 
        { 
        from: 0, 
        to: 20, 
        color: "Red" 
        }, { 
        from: 20, 
        to: 40, 
        color: "#ff6600" 
        }, 
        { 
        from: 40, 
        to: 60, 
        color: "Orange" 
        }, 
        { 
        from: 60, 
        to: 80, 
        color: "Yellow" 
        } 
        , 
        { 
        from: 80, 
        to: 100, 
        color: "Green" 
        } 
       ] 
       } 
      }); 
      </script> 
     </td> 
     </tr> 
     <tr> 
     <td style="color:yellow">Preventative Controls</td> 
     <td><div id="linear-gauge21"></div> 
      <script> 
      $("#linear-gauge21").kendoLinearGauge({ 
       pointer: { 
       color: "Blue", 
       value: 95, 
       }, 
       scale: { 
       vertical: false, 
       majorTicks: { 
        color: "white", 
       }, 
       minorUnit: 5, 
       minorTicks: { 
        color: "white", 
       }, 
       max: 100, 
       labels: { 
        color: "white", 
        template: "#= value #%" 
       }, 
       ranges: [ 
        { 
        from: 0, 
        to: 20, 
        color: "Red" 
        }, { 
        from: 20, 
        to: 40, 
        color: "#ff6600" 
        }, 
        { 
        from: 40, 
        to: 60, 
        color: "Orange" 
        }, 
        { 
        from: 60, 
        to: 80, 
        color: "Yellow" 
        } 
        , 
        { 
        from: 80, 
        to: 100, 
        color: "Green" 
        } 
       ] 
       } 
      }); 
      </script> 
      <div id="linear-gauge22"></div> 
      <script> 
      $("#linear-gauge22").kendoLinearGauge({ 
       pointer: { 
       color: "Blue", 
       value: 75, 
       }, 
       scale: { 
       vertical: false, 
       majorTicks: { 
        color: "white", 
       }, 
       minorUnit: 5, 
       minorTicks: { 
        color: "white", 
       }, 
       max: 100, 
       labels: { 
        color: "white", 
        template: "#= value #%" 
       }, 
       ranges: [ 
        { 
        from: 0, 
        to: 20, 
        color: "Red" 
        }, { 
        from: 20, 
        to: 40, 
        color: "#ff6600" 
        }, 
        { 
        from: 40, 
        to: 60, 
        color: "Orange" 
        }, 
        { 
        from: 60, 
        to: 80, 
        color: "Yellow" 
        } 
        , 
        { 
        from: 80, 
        to: 100, 
        color: "Green" 
        } 
       ] 
       } 
      }); 
      </script> 
      <div id="linear-gauge23"></div> 
      <script> 
      $("#linear-gauge23").kendoLinearGauge({ 
       pointer: { 
       color: "Blue", 
       value: 35, 
       }, 
       scale: { 
       vertical: false, 
       majorTicks: { 
        color: "white", 
       }, 
       minorUnit: 5, 
       minorTicks: { 
        color: "white", 
       }, 
       max: 100, 
       labels: { 
        color: "white", 
        template: "#= value #%" 
       }, 
       ranges: [ 
        { 
        from: 0, 
        to: 20, 
        color: "Red" 
        }, { 
        from: 20, 
        to: 40, 
        color: "#ff6600" 
        }, 
        { 
        from: 40, 
        to: 60, 
        color: "Orange" 
        }, 
        { 
        from: 60, 
        to: 80, 
        color: "Yellow" 
        } 
        , 
        { 
        from: 80, 
        to: 100, 
        color: "Green" 
        } 
       ] 
       } 
      }); 
      </script> 
     </td> 
     </tr> 
     <tr> 
     <td style="color:yellow">Detective Controls</td> 
     <td><div id="linear-gauge31"></div> 
      <script> 
      $("#linear-gauge31").kendoLinearGauge({ 
       pointer: { 
       color: "Blue", 
       value: 65, 
       }, 
       scale: { 
       vertical: false, 
       majorTicks: { 
        color: "white", 
       }, 
       minorUnit: 5, 
       minorTicks: { 
        color: "white", 
       }, 
       max: 100, 
       labels: { 
        color: "white", 
        template: "#= value #%" 
       }, 
       ranges: [ 
        { 
        from: 0, 
        to: 20, 
        color: "Red" 
        }, { 
        from: 20, 
        to: 40, 
        color: "#ff6600" 
        }, 
        { 
        from: 40, 
        to: 60, 
        color: "Orange" 
        }, 
        { 
        from: 60, 
        to: 80, 
        color: "Yellow" 
        } 
        , 
        { 
        from: 80, 
        to: 100, 
        color: "Green" 
        } 
       ] 
       } 
      }); 
      </script> 
      <div id="linear-gauge32"></div> 
      <script> 
      $("#linear-gauge32").kendoLinearGauge({ 
       pointer: { 
       color: "Blue", 
       value: 30, 
       }, 
       scale: { 
       vertical: false, 
       majorTicks: { 
        color: "white", 
       }, 
       minorUnit: 5, 
       minorTicks: { 
        color: "white", 
       }, 
       max: 100, 
       labels: { 
        color: "white", 
        template: "#= value #%" 
       }, 
       ranges: [ 
        { 
        from: 0, 
        to: 20, 
        color: "Red" 
        }, { 
        from: 20, 
        to: 40, 
        color: "#ff6600" 
        }, 
        { 
        from: 40, 
        to: 60, 
        color: "Orange" 
        }, 
        { 
        from: 60, 
        to: 80, 
        color: "Yellow" 
        } 
        , 
        { 
        from: 80, 
        to: 100, 
        color: "Green" 
        } 
       ] 
       } 
      }); 
      </script> 
      <div id="linear-gauge33"></div> 
      <script> 
      $("#linear-gauge33").kendoLinearGauge({ 
       pointer: { 
       color: "Blue", 
       value: 10, 
       }, 
       scale: { 
       vertical: false, 
       majorTicks: { 
        color: "white", 
       }, 
       minorUnit: 5, 
       minorTicks: { 
        color: "white", 
       }, 
       max: 100, 
       labels: { 
        color: "white", 
        template: "#= value #%" 
       }, 
       ranges: [ 
        { 
        from: 0, 
        to: 20, 
        color: "Red" 
        }, { 
        from: 20, 
        to: 40, 
        color: "#ff6600" 
        }, 
        { 
        from: 40, 
        to: 60, 
        color: "Orange" 
        }, 
        { 
        from: 60, 
        to: 80, 
        color: "Yellow" 
        } 
        , 
        { 
        from: 80, 
        to: 100, 
        color: "Green" 
        } 
       ] 
       } 
      }); 
      </script> 
     </td> 
     </tr> 
    </table> 
    </body> 
</html>

來源

2015-07-21 Grant Jones

告訴我們你到目前爲止 – depperm

由於您的量表已經是JavaScript，所以帶有硬編碼值，創建純CSS解決方案沒有什麼意義。

通過使用jQuery的.after()函數，您可以在選定元素之後立即向文檔中添加內容。

下面是一個計爲例（作爲獎金我分隔的JS）：

jQuery().ready(function() { 
 
    var overallValue = 71.8; 
 
    $("#overall_gauge").kendoRadialGauge({ 
 
\t pointer: { 
 
\t \t color: "Red", 
 
\t \t value: overallValue, 
 
\t }, 
 

 
\t scale: { 
 
\t \t majorUnit: 10, 
 
\t \t majorTicks: { 
 
\t \t color: "white", 
 
\t \t }, 
 
\t \t minorUnit: 5, 
 
\t \t minorTicks: { 
 
\t \t color: "white", 
 
\t \t }, 
 
\t \t startAngle: -40, 
 
\t \t endAngle: 220, 
 
\t \t max: 100, 
 
\t \t labels: { 
 
\t \t color: "white", 
 
\t \t template: "#= value #%" 
 
\t \t }, 
 
\t \t ranges: [ 
 
\t \t { 
 
\t \t \t from: 0, 
 
\t \t \t to: 20, 
 
\t \t \t color: "Red" 
 
\t \t }, { 
 
\t \t \t from: 20, 
 
\t \t \t to: 40, 
 
\t \t \t color: "#ff6600" 
 
\t \t }, 
 
\t \t { 
 
\t \t \t from: 40, 
 
\t \t \t to: 60, 
 
\t \t \t color: "Orange" 
 
\t \t }, 
 
\t \t { 
 
\t \t \t from: 60, 
 
\t \t \t to: 80, 
 
\t \t \t color: "Yellow" 
 
\t \t } 
 
\t \t , 
 
\t \t { 
 
\t \t \t from: 80, 
 
\t \t \t to: 100, 
 
\t \t \t color: "Green" 
 
\t \t } 
 
\t \t ] 
 
\t } 
 
\t }).closest('td').after('<td>' + overallValue + '</td>'); 
 
});

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css"> 
 
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.rtl.min.css"> 
 
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css"> 
 
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.min.css"> 
 
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.default.min.css"> 
 
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.mobile.all.min.css"> 
 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
<script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script> 
 
<script src="http://cdn.kendostatic.com/2015.2.624/js/jszip.min.js"></script> 
 
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script> 
 

 
<table border= 2px> 
 
    <tr> 
 
    <td style="color: White">Overall Risk</td> 
 
    <td style="width: 300px"> 
 
     <div id="overall_gauge"></div> 
 
    </td> 
 
    </tr> 
 
</table>

此外，您可能需要使用一些CSS，而不是表。

來源

2015-07-21 14:32:03 BillyNate

This +一般的HTML/CSS/JS分離和清理。我認爲儀表板本身可以更加動態，Op正在重複大量的JS ...... – Foaster

不能同意更多，但這超出了問題...... – BillyNate

爲網頁添加一個值部分

回答

相關問題