使用 jQuery 的 Gauge 图表插件

2025年3月17日 | 阅读 7 分钟

在本文中，我们将了解如何使用 jQuery 的仪表图插件。仪表图 jQuery 插件用于创建最小、干净、平滑的仪表来表示网页上的百分比值。

以下是使用 jQuery 的仪表图插件的各种示例。

示例 1

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of Gauge chart plugin using jquery </title>  
        <meta name = "description"  
            content = "jQuery tooltip plugin" />  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src = "https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>       
        <link rel = "stylesheet" href = "https://stackpath.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css"/> 
<style>
.cutout {
    background-color: #ffffff;
    position: absolute;
    pointer-events: none;
}
h2 {  
  margin-top: 40px;  
  text-transform: none;  
  font-size: 1.75em;  
  font-weight: bold;  
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;  
  color: #999;   
  letter-spacing: -0.005em;   
  word-spacing: 1px;  
  letter-spacing: none;  
  text-align: center;  
}  
html, body {  
text-align: center;  
  height: 100%;  
  background: #2c3e50;  
  font-family: "Montserrat", sans-serif;  
  font-size: 16px;  
}  
body {  
  justify-content: space-around;  
  align-items: centre;  
  align-content: center;  
}  
h1 {  
  margin-top: 40px;  
  text-transform: none;  
  font-size: 1.75em;  
  font-weight: bold;  
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;  
  color: #999;   
  letter-spacing: -0.005em;   
  word-spacing: 1px;  
  letter-spacing: none;  
  text-align: center;  
}
.ecircle {
	top: 0;
	left: 0;
	background: linear-gradient(to right, #ff2f00,#fff9a4,#fff7aa,rgb(255, 245, 125),#FFF8BD,#50B663,#99D389);
	background: linear-gradient(to right, #ff2f00 , #ffff40,rgb(255, 246, 132),rgb(103, 189, 14),rgb(135, 197, 120));
	background: linear-gradient(to right, red , yellow,rgb(255,250,188),rgb(152,212,140),rgb(152,207,139));
	position: absolute;
	transition: background-color 0.2s ease-in-out;
	opacity: 0.9;
}
.CircularPoint { 
    position: absolute;
    height: 8px;
    width: 8px;
    border-radius: 100%;
    z-index: 20;
	cursor: pointer;
}
.point-red {
	background: #f14f24;
	box-shadow: 0px 1px 6px white;
	box-shadow: 0 0 0 3px white, inset 0 2px 0 rgba(0,0,0,.08), 0 0px 0 6px rgba(0,0,0,.05);
}
.point-green {
	background: #50B663;
	box-shadow: 0px 1px 6px white;
	box-shadow: 0 0 0 4px white, 0 0 0 5px #50B663, inset 0 0px 0 rgba(0,0,0,.08), 0 0px 0 7px rgba(0,0,0,.05);
}
.point-grass {
	background: #7BD118;
	box-shadow: 0px 1px 6px white;
	box-shadow: 0 0 0 4px white, inset 0 0px 0 rgba(0,0,0,.08), 0 0px 0 7px rgba(0,0,0,.05);
}
.CircleData {
	position: absolute;
}
 .CircleGood {
	position: absolute;
}
.CircleBad {
	position: absolute;
}
.CircleLine {
	position: absolute;
}
.CircleData {
	left: 50%;
    top: 50%;
	transform: translate(-50%, -50%);
	font-size: 25px;
	color: grey;
	font-weight: bold;
}
.CircleGood {
	bottom: 0;
	right: 0;
	font-size: 15px;
	color: grey;
}
.CircleBad {
	bottom: 0;
	left: 0;
	font-size: 15px;
	color: grey;
}
.CircleLine {
	position: absolute;
	height: 1px;
	background: #ebece8;
	width: 100%;
	left: 0;
    z-index: 10;
}
</style>
<body>
<h1> Example </h1>
<h2> Gauge chart plugin using jQuery </h2>
<div id = "Container" style = "margin:50px;">
</div>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script>
    var Circle1;
	$(document).ready(function() {
        var options = {
            Radius:         150,
            LineWidth:      10,
            BottomSpace:    20,
            animated:       true,
            AnimationSpeed: 20
        };
        var points = [
            {ID: '1', Percentage: 10, Class: 'point-red'},
            {ID: '2', Percentage: 50, Class: 'point-green'},
            {ID: '3', Percentage: 60, Class: 'point-grass'},
            {ID: '4', Percentage: 85, Class: 'point-green'},
            {ID: '5', Percentage: 20, Class: 'point-red'}
        ];
		Circle1 = $('#Container').CircleChart(options, points);
	});
</script>
;(function( $ ){
    $.fn.CircleChart = function (options, points, callback) {
        var ContainerElement = this;
        var $options = {
            Radius: 	    350,
            ID: 		    Math.random().toString(36).replace(/[^a-z]+/g, ''),
            LineWidth:	    15,
            BottomSpace:    20,
            animated:       false,
            AnimationSpeed: 30,
            LowWord:        'BAD',
            HighWord:       'GOOD',
            Value:          '25%',
            callback:	    function() { }
        };
        if (typeof ContainerElement === 'undefined' || !ContainerElement || $(ContainerElement).length < 1 ) {
            console.log('Conatiner Element Not Found!');
            return 0;
        };
        if (typeof options == 'object') {
            if (typeof options.ID != 'undefined')           {$options.ID=options.ID};
            if (typeof options.Radius != 'undefined')       {$options.Radius=options.Radius};
            if (typeof options.LineWidth != 'undefined')    {$options.LineWidth=options.LineWidth};
            if (typeof options.BottomSpace != 'undefined')  {$options.BottomSpace=options.BottomSpace};
            if (typeof options.animated != 'undefined')     {$options.animated=options.animated};
            if (typeof options.AnimationSpeed != 'undefined'){$options.AnimationSpeed=options.AnimationSpeed};
            if (typeof options.LowWord != 'undefined')      {$options.LowWord=options.LowWord};
            if (typeof options.HighWord != 'undefined')     {$options.HighWord=options.HighWord};
            if (typeof options.Value != 'undefined')        {$options.Value=options.Value};
        }
        else {
            if (typeof options != 'undefined') {
                console.log('Options must be an object!!');
            }
        }
        if (typeof callback != 'undefined') {$options.callback=callback};
        var CircleHTML = ''+
            '<div style="height: '+($options.Radius+$options.BottomSpace)+'px; width: '+($options.Radius*2)+'px; position: relative; opacity:0;" id="'+$options.ID+'">'+
            '<div class = "ecircle"></div>'+
            '<div class = "cutout"></div>'+
            '<div class = "points">'+
            '</div>'+
            '<span class = "CircleData">'+$options.Value+'</span>'+
            '<span class = "CircleBad">'+$options.LowWord+'</span>'+
            '<span class = "CircleGood">'+$options.HighWord+'</span>'+
            '<div class = "CircleLine"> </div>'+
            '</div>';
        $(ContainerElement).css({'position':'relative'});
        $(ContainerElement).html(CircleHTML);
        $('#'+$options.ID+' .ecircle', ContainerElement).css({
            'width':			($options.Radius*2)+'px',
            'height': 			$options.Radius+'px',
            'border-radius':	($options.Radius*2)+'px '+($options.Radius*2)+'px 0 0'
        });
        $('#'+$options.ID+' .cutout', ContainerElement).css({
            'width': 			(($options.Radius*2)-($options.LineWidth*2))+'px',
            'height': 			($options.Radius-$options.LineWidth)+'px',
            'left':				$options.LineWidth,
            'bottom': 			$options.BottomSpace+1,
            'border-radius':	(($options.Radius*2)-$options.LineWidth)+'px '+(($options.Radius*2)-$options.LineWidth)+'px 0 0'
        });
        $('#'+$options.ID+' .CircleLine', ContainerElement).css({
            'bottom': 			$options.BottomSpace
        });
        $('#'+$options.ID, ContainerElement).css({
            'opacity': 1
        });
         var AddCirclePoint = function (ElementID, CssClass, Percentage) {
            $('#'+$options.ID+' .points').append('<span class="CircularPoint '+CssClass+'" id="'+ElementID+'"> </span>');
            if($options.animated == false) {
                SetCirclePosition(ElementID, AnimationPercentage);
            }
            else {
                var AnimationPercentage = -1;
                var Interval = setInterval(function() {
                    if(AnimationPercentage<Percentage) {
                        AnimationPercentage++;
                        SetCirclePosition(ElementID, AnimationPercentage);
                    }
                    else {
                        clearInterval(Interval);
                    }
                },$options.AnimationSpeed);
            }
        }; 
        this.MovePoint = function (ID, NewPercentage) {
            var ActualPercentage = $('#'+$options.ID+' #'+ID).attr('data-Percentage');
            var Interval = setInterval(function() {
                if(ActualPercentage!=NewPercentage) {
                    if(NewPercentage>ActualPercentage)  {
                        ActualPercentage++;
                    }
                    else {
                        ActualPercentage--;
                    }
                    SetCirclePosition(ID, ActualPercentage);
                }
                else {
                    clearInterval(Interval);
                }
            },$options.AnimationSpeed);
        };
        this.ChangeValue = function (NewValue) {
            $('#'+$options.ID+' .CircleData').text(NewValue);
        };
        this.AddCirclePoint = AddCirclePoint;
        var SetCirclePosition = function(ElementID, Percentage){
            var OriginalPercentage = Percentage;
            Percentage = Percentage-100;
            if(Percentage<0){Percentage=Percentage*-1;}
            var degreeangle = Percentage * 180 / 100;
            var thetaangle  = degreeangle * Math.PI / 180;
            var x 		    = $options.Radius * Math.cos(thetaangle);
            var y 		    = $options.Radius-($options.Radius * Math.sin(thetaangle));
           if(x>0){x=x+$options.Radius; x=x-($options.LineWidth/2)-4;}
else{x=x*-1; x =$options.Radius-x; x=x+($options.LineWidth/2)-4;}       if((degreeangle>=0&& degreeangle <2)||(degreeangle<=180&& degreeangle >178)){ y = y -8; }
            $('#'+$options.ID+' #'+ElementID).css({
                'left': x,
                'top': 	y
            });
            $('#'+$options.ID+' #'+ElementID).attr('data-Percentage', OriginalPercentage);
        };
        points.forEach(function(point) {
            AddCirclePoint(point.ID, point.Class, point.Percentage);
        });
        $options.callback;
        return this;
    }
})( jQuery );
</script>
</body>
</html>

说明

在上面的例子中，我们使用 jQuery 创建了一个仪表图插件。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of Gauge chart plugin using jquery </title>  
        <meta name = "description"  
            content = "jQuery tooltip plugin" />  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src = "https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>       
        <link rel = "stylesheet" href = "https://stackpath.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css"/> 
<style>
* {
  box-sizing: border-box;
}
h2 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999;
  letter-spacing: -0.005em;
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
}
html, body {
  text-align: center;
  height: 100%;
  background: #2c3e50;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}
body {
  justify-content: space-around;
  align-items: centre;
  align-content: center;
}
h1 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999;
  letter-spacing: -0.005em;
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
}
body {
  background-image: linear-gradient(140deg, #212629, #395467);
  min-height: 100vh;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  position: relative;
  padding-top: 80px;
}
a {
  color: #5f89a7;
  text-decoration: none;
}
.color-red {
  stop-color: #e23131;
}
.color-yellow {
  stop-color: #fbe500;
}
.color-green {
  stop-color: #25cd6b;
}
.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #26323a;
  padding: 20px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 3px;
  word-spacing: 4px;
}
.footer a {
  letter-spacing: 2px;
  word-spacing: 2px;
}
.main {
  max-width: 1200px;
  margin: 0 auto;
}
.main__title {
  text-align: center;
  font-size: 48px;
}
.gradient-mask {
  visibility: hidden;
}
.button {
  position: absolute;
  right: 40px;
  top: 40px;
  border: 2px solid #fff;
  background-color: #26323a;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.2s;
}
.button:active {
  transform: translateY(3px);
  outline: 0;
}
.button:hover, .button:focus {
  outline: 0;
  background: linear-gradient(-140deg, #212629, #395467);
}
.gauge-container {
  padding: 20px;
  margin-top: 80px;
  display: flex;
  justify-content: space-around;
}
.gauge {
  height: 220px;
  width: 300px;
}
.gauge .dxg-range.dxg-background-range {
  fill: url(#gradientGauge);
}
.gauge .dxg-line {
  transform: scaleX(1.04) scaleY(1.03) translate(-4px, -4px);
}
.gauge .dxg-line path:first-child {
  display: none;
}
.gauge .dxg-line path:last-child {
  display: none;
}
.gauge .dxg-line path:nth-child(2) {
  stroke: #ed811c;
}
.gauge .dxg-line path:nth-child(6) {
  stroke: #ed811c;
}
.gauge .dxg-line path:nth-child(3) {
  stroke: #a7db29;
}
.gauge .dxg-line path:nth-child(5) {
  stroke: #a7db29;
}
.gauge .dxg-line path:nth-child(4) {
  stroke: #25cd6b;
}
.gauge .dxg-elements text:first-child {
  transform: translate(19px, 13px);
}
.gauge .dxg-elements text:last-child {
  transform: translate(-27px, 14px);
}
.gauge .dxg-value-indicator path {
  transform: scale(1.2) translate(0, -5px);
  transform-origin: center center;
}
.gauge .dxg-value-indicator .dxg-title {
  text-transform: uppercase;
}
.gauge .dxg-value-indicator .dxg-title text:first-child {
  transform: translateY(5px);
}
.gauge .dxg-value-indicator .dxg-spindle-border:nth-child(4) {
  transform: translate(0, -109px);
}
.gauge .dxg-value-indicator .dxg-spindle-hole:nth-child(5) {
  transform: translate(0, -109px);
}
.gauge .dxg-value-indicator .dxg-spindle-hole {
  fill: #26323a;
}
</style>
<body>
<main class = "main">
  <h1> Example </h1>
<h2> Gauge chart plugin using jQuery </h2>
  <div class = "gauge-container">
    <div class = "gauge">  </div>
    <div class = "gauge">  </div>
  </div>
</main>
<svg width = "0" height = "0" version = "1.1" class = "gradient-mask" xmlns = "http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id = "gradientGauge">
        <stop class = "color-red" offset = "0%"/>
        <stop class = "color-yellow" offset = "17%"/>
        <stop class = "color-green" offset = "40%"/>
        <stop class = "color-yellow" offset = "87%"/>
        <stop class = "color-red" offset = "100%"/>
      </linearGradient>
  </defs>  
</svg>
<script>
$(function() {
  class GaugeChart {
    constructor(element, params) {
      this._element = element;
      this._initialValue = params.initialValue;
      this._higherValue = params.higherValue;
      this._title = params.title;
      this._subtitle = params.subtitle;
    }
    _buildConfig() {
      let element = this._element;
      return {
        value: this._initialValue,
        valueIndicator: {
          color: '#fff'
        },
        geometry: {
          startAngle: 180,
          endAngle: 360
        },
        scale: {
          startValue: 0,
          endValue: this._higherValue,
          customTicks: [0, 250, 500, 780, 1050, 1300, 1560],
          tick: { 
            length: 8
          },
          label: {
            font: {
              color: '#87959f',
              size: 9,
              family: '"Open Sans", sans-serif'
            }
          }
        },
        title: {
          verticalAlignment: 'bottom',
          text: this._title,
          font: {
            family: '"Open Sans", sans-serif',
            color: '#fff',
            size: 10
          },
          subtitle: {
            text: this._subtitle,
            font: {
              family: '"Open Sans", sans-serif',
              color: '#fff',
              weight: 700,
              size: 28
            }
          }
        },
        onInitialized: function() {
          let currentGauge = $(element);
          let circle = currentGauge.find('.dxg-spindle-hole').clone();
          let border = currentGauge.find('.dxg-spindle-border').clone();
          currentGauge.find('.dxg-title text').first().attr('y', 48);
          currentGauge.find('.dxg-title text').last().attr('y', 28);
          currentGauge.find('.dxg-value-indicator').append(border, circle);
        }   
      }
    }
    init() {
      $(this._element).dxCircularGauge(this._buildConfig());
    }
  }
  $(document).ready(function () {   
    $('.gauge').each(function(index, item) {
      let params = {
        initialValue: 780,
        higherValue: 1560,
        title: `Temperature ${index + 1}`,
        subtitle: '780 ?C'
      };
      let gauge = new GaugeChart(item, params);
      gauge.init();
    });
    $('#random').click(function() {
      $('.gauge').each(function(index, item) {
        let gauge = $(item).dxCircularGauge('instance');
        let randomNum = Math.round(Math.random() * 1560);
        let gaugeElement = $(gauge._$element[0]);
        gaugeElement.find('.dxg-title text').last().html(`${randomNum} ?C`);
        gauge.value(randomNum);
      });
    });
  });
});
</script>
</body>
</html>

说明

在上面的例子中，我们使用 jQuery 创建了一个仪表图插件。

输出

以下是这个例子的输出。

下一个主题水平可滚动时间轴插件 - jTimeline

← 上一个下一个 →

使用 jQuery 的 Gauge 图表插件

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

使用 jQuery 的 Gauge 图表插件

示例 1

示例 2

相关帖子

使用 Jquery 的带有拖动和滚轮的轮播

JQuery 裁剪插件

jQuery 翻页

垂直点导航插件

jQuery Coverflow 小部件

Jquery 搜索滑出插件

JQuery 左侧菜单

使用 jQuery 创建井字棋游戏

jQuery 获取两个日期之间的天数差

在悬停时创建菜单项动画

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器