All Components

Sparklines / Basic usage

Climate control history

980mb
21°C
32%

Temperature control

Conditioner working time

  • MON
  • TUE
  • WED
  • THU
  • FRI
  • SAT
  • SUN

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"> 
   <div class="demo-section k-content"> 
    <div class="climate"> 
     <h4> Climate control history </h4> 
     <table class="history"> 
      <tbody>
       <tr> 
        <td class="spark"><span id="press-log"></span></td> 
        <td class="value">980<span>mb</span></td> 
       </tr> 
       <tr> 
        <td class="spark"><span id="temp-log"></span></td> 
        <td class="value">21<span>°C</span></td> 
       </tr> 
       <tr> 
        <td class="spark"><span id="hum-log"></span></td> 
        <td class="value">32<span>%</span></td> 
       </tr> 
      </tbody>
     </table> 
    </div> 
    <div class="temperature"> 
     <h4> Temperature control </h4> 
     <div class="stats"> 
      <span id="temp-range"></span> 
     </div> 
    </div> 
    <div class="conditioner"> 
     <h4> Conditioner working time </h4> 
     <ul class="pie-list stats"> 
      <li>MON <span id="stats-mon"></span></li> 
      <li>TUE <span id="stats-tue"></span></li> 
      <li>WED <span id="stats-wed"></span></li> 
      <li>THU <span id="stats-thu"></span></li> 
      <li>FRI <span id="stats-fri"></span></li> 
      <li>SAT <span id="stats-sat"></span></li> 
      <li>SUN <span id="stats-sun"></span></li> 
     </ul> 
    </div> 
   </div> 
   <script>
        function createSparklines() {
            // binding to array
            $("#press-log").kendoSparkline({
                data: [
                    936, 968, 1025, 999, 998, 1014, 1017, 1010, 1010, 1007,
                    1004, 988, 990, 988, 987, 995, 946, 954, 991, 984,
                    974, 956, 986, 936, 955, 1021, 1013, 1005, 958, 953,
                    952, 940, 937, 980, 966, 965, 928, 916, 910, 980
                ]
            });

            // User-set Sparkline type
            $("#temp-log").kendoSparkline({
                type: "column",
                data: [
                    16, 17, 18, 19, 20, 21, 21, 22, 23, 22,
                    20, 18, 17, 17, 16, 16, 17, 18, 19, 20,
                    21, 22, 23, 25, 24, 24, 22, 22, 23, 22,
                    22, 21, 16, 15, 15, 16, 19, 20, 20, 21
                ],
                tooltip: {
                    format: "{0} °C"
                }
            });

            $("#hum-log").kendoSparkline({
                type: "area",
                data: [
                    71, 70, 69, 68, 65, 60, 55, 55, 50, 52,
                    73, 72, 72, 71, 68, 63, 57, 58, 53, 55,
                    63, 59, 61, 64, 58, 53, 48, 48, 45, 45,
                    63, 64, 63, 67, 58, 56, 53, 59, 51, 54
                ],
                tooltip: {
                    format: "{0} %"
                }
            });

            $("#temp-range").kendoSparkline({
                type: "bullet",
                data: [21, 23],
                valueAxis: {
                    min: 0,
                    max: 30,
                    plotBands: [{
                        from: 0, to: 15, color: "#787878", opacity: 0.15
                    }, {
                        from: 15, to: 22, color: "#787878", opacity: 0.3
                    }, {
                        from: 22, to: 30, color: "#787878", opacity: 0.15
                    }]
                },
                tooltip: {
                    visible: true
                }
            });

            // Pie "sparklines"
            $("#stats-mon").kendoSparkline({
                type: "pie",
                data: [14, 10]
            });

            $("#stats-tue").kendoSparkline({
                type: "pie",
                data: [8, 16]
            });

            $("#stats-wed").kendoSparkline({
                type: "pie",
                data: [8, 16]
            });

            $("#stats-thu").kendoSparkline({
                type: "pie",
                data: [12, 12]
            });

            $("#stats-fri").kendoSparkline({
                type: "pie",
                data: [6, 18]
            });

            $("#stats-sat").kendoSparkline({
                type: "pie",
                data: [1, 23]
            });

            $("#stats-sun").kendoSparkline({
                type: "pie",
                data: [5, 19]
            });
        }

        $(document).ready(createSparklines);
        $("#example").bind("kendo:skinChange", createSparklines);
    </script> 
   <style>
        .temperature, .conditioner {
            margin: 0;
            padding: 30px 0 0 0;
        }

        .history {
            border-collapse: collapse;
            width: 100%;
        }
        .history td {
            padding: 0;
            vertical-align: bottom;
        }
        .history td.spark {
            line-height: 30px;
        }
        .history td.value {
            font-size: 1.6em;
            font-weight: normal;
            line-height: 20px;
        }
        .history td.value span {
            font-size: .5em;
            vertical-align: top;
            line-height: 30px;
        }
        .stats {
            text-align: center;
        }
        .pie-list {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        .pie-list li {
            display: inline-block;
            text-align: center;
            width: 34px;
            font-size: 10px;
        }
        #stats-mon,
        #stats-tue,
        #stats-wed,
        #stats-thu,
        #stats-fri,
        #stats-sat,
        #stats-sun {
            display: block;
            width: 34px;
            line-height: 30px;
        }
        #temp-range {
            width: 100%;
            line-height: 30px;
        }
    </style> 
  </div>   
 </body>
</html>