несколько цветов на индикаторе выполнения с CSS или JQuery в зависимости от ширины в процентах - PullRequest
Новая
       1

несколько цветов на индикаторе выполнения с CSS или JQuery в зависимости от ширины в процентах

0 голосов
/ 07 мая 2018

Мне нужно реализовать индикатор выполнения с помощью CSS, JS или того, что вы предлагаете. Мне нужно, чтобы это было многоцветным ... В процентах.

Например, если у меня есть значение 50%, индикатор выполнения должен быть светло-синим до 30% и зеленым между 30-50%.

Итак, я установил style="width:xx%", чтобы установить процент.

Есть ли способ создания многоцветного индикатора выполнения?

enter image description here

Я пробовал это: 

.progressMulti {
    height: 32px;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 15px;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    font-size: 20px;
    background: linear-gradient(to right, green 75%, blue 20%, red 5%);
}

но если установить ширину, например, 50%, я смогу видеть все цвета ... Вместо этого он должен быть только голубым и зеленым со значением 50%.

Ответы [ 2 ]

0 голосов
/ 07 мая 2018

Как насчет использования холста HTML? См. https://jsfiddle.net/y8m8pk1m/ для примера. 

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 70, 20);
ctx.stroke();

ctx.fillStyle = "red";
ctx.fillRect(90, 20, 50, 20);
ctx.stroke();

ctx.fillStyle = "black";
ctx.fillRect(140, 20, 50, 20);
ctx.stroke();

</script> 

</body>
</html>

Если вы ищете немного более сложный пример по этому вопросу, то https://github.com/anurag-sinha/utils/tree/master/widgets/Gauges/analog, который является аналоговым датчиком для представления скалярного количества (вы можете скачать и просто запустить Analog.html в Chrome). Вам просто нужна цветная пороговая полоса от этого датчика. Аналоговый датчик является немного сложным, поскольку он требует некоторой арифметики для вычисления угла поворота и т. Д., Но в вашем случае он должен быть довольно простым (используйте fillRect). Вы можете построить свой виджет по аналогичным линиям.

0 голосов
/ 07 мая 2018 

function set_progress(_num){
	$('#progress').empty();
	var el_1_width=0;
	var el_2_width=0;
	var el_3_width=0;
	var el_4_width=0;
	if(_num>30){el_1_width=30;}else{el_1_width=_num;}
	if(_num>60){el_2_width=30;}else{el_2_width=_num-el_1_width;}
	if(_num>80){el_3_width=30;}else{el_3_width=_num-el_1_width-el_2_width;}
	if(_num>90){el_4_width=_num-90;}
	var new_font_clor='';
	if(_num<55){new_font_clor='color:black';}
	$('#progress').append('<div class="progress-text" style="'+new_font_clor+'">'+_num+' %</div>');
	$('#progress').append('<div class="progress-el" style="background-color:blue; width:'+el_1_width+'%;">&nbsp;</div>');
	$('#progress').append('<div class="progress-el" style="background-color:green; width:'+el_2_width+'%;">&nbsp;</div>');
	$('#progress').append('<div class="progress-el" style="background-color:yellow; width:'+el_3_width+'%;">&nbsp;</div>');
	$('#progress').append('<div class="progress-el" style="background-color:red; width:'+el_4_width+'%;">&nbsp;</div>');

}

set_progress(12);
   #progress{
     border-style:solid;
     border-color:black;
     //border-width:4px;
   }
   .progress-el{
   	 display:inline-block;
   	 height:40px;
   }
   .progress-text{
     position:fixed;
     color:white;
     font-weight:bold;
     width:100%;
     height:40px;
     line-height:40px;
     text-align:center;
     font-size:24pt;

   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


 <div id="progress"></div>


 <input type="button" value="set 17%" onclick="set_progress(17);">
 <input type="button" value="set 31%" onclick="set_progress(31);">
 <input type="button" value="set 45%" onclick="set_progress(45);">
 <input type="button" value="set 67%" onclick="set_progress(67);">
 <input type="button" value="set 82%" onclick="set_progress(82);">
 <input type="button" value="set 97%" onclick="set_progress(97);">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...