All Components

Linear Gauge / Basic usage

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Basic usage</title> 
  <meta charset="utf-8"> 
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> 
  <link href="../../styles/kendo.common.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.default.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
  <script src="../../js/jquery.min.js"></script> 
  <script src="../../js/kendo.all.min.js"></script> 
  <script src="../content/shared/js/console.js"></script> 
  <script>
        
    </script> 
 </head> 
 <body> 
  <a class="offline-button" href="../index.html">Back</a> 
  <div id="example" class="k-content"> 
   <div id="gauge-container"> 
    <div id="gauge"></div> 
   </div> 
   <script>
                function createGauges() {
                    var value = $("#gauge-value").val();

                    $("#gauge").kendoLinearGauge({
                        pointer: {
                            value: 28
                        },

                        scale: {
                            majorUnit: 20,
                            minorUnit: 2,
                            min: -40,
                            max: 60,
                            vertical: true,
                            ranges: [
                                {
                                    from: -40,
                                    to: -20,
                                    color: "#2798df"
                                }, {
                                    from: 30,
                                    to: 45,
                                    color: "#ffc700"
                                }, {
                                    from: 45,
                                    to: 60,
                                    color: "#c20000"
                                }
                            ]
                        }
                    });
                }

                $(document).ready(function() {
                    createGauges();

                    $(document).bind("kendo:skinChange", function(e) {
                        createGauges();
                    });
                });
            </script> 
   <style>
                #gauge-container {
                    text-align: center;
                    margin: 0 auto;
                    background: transparent url("../content/dataviz/gauge/linear-gauge-container.png") no-repeat 50% 50%;
                    padding: 18px;
                    width: 300px;
                    height: 300px;
                }

                #gauge {
                    height: 300px;
                    display: inline-block;
                    *display: inline;
                    zoom: 1;
                }
            </style> 
  </div>   
 </body>
</html>