সবুজ থেকে লাল রঙ শতাংশের উপর নির্ভর করে

Question 1

আমার একটি পোল সিস্টেম রয়েছে এবং আমি এই পোলটি রঙিন করার জন্য উত্তর চাই। উদাহরণস্বরূপ: যদি এটি 10% হয় তবে এটি লাল হবে, যদি 40% এটি হলুদ এবং 80% হ'ল সবুজ হয়, তাই আমি চাই আমার জাভাস্ক্রিপ্ট কোডটি প্রদত্ত শতাংশের সাথে মিলিয়ে একটি রঙ তৈরি করতে আরজিবি রঙগুলি ব্যবহার করবে।

function hexFromRGB(r, g, b) {
    var hex = [
        r.toString( 16 ),
        g.toString( 16 ),
        b.toString( 16 )
    ];
    $.each( hex, function( nr, val ) {
        if ( val.length === 1 ) {
            hex[ nr ] = "0" + val;
        }
    });
    return hex.join( "" ).toUpperCase();
}

এখন আমি শতাংশ থেকে হেক্স চাই।

Question 2

এটি আপনার প্রয়োজনের তুলনায় আরও বেশি হতে পারে তবে এটি আপনাকে যেকোন স্বেচ্ছাসেবী রঙের মানচিত্র সেট আপ করতে দেয়:

var percentColors = [
    { pct: 0.0, color: { r: 0xff, g: 0x00, b: 0 } },
    { pct: 0.5, color: { r: 0xff, g: 0xff, b: 0 } },
    { pct: 1.0, color: { r: 0x00, g: 0xff, b: 0 } } ];

var getColorForPercentage = function(pct) {
    for (var i = 1; i < percentColors.length - 1; i++) {
        if (pct < percentColors[i].pct) {
            break;
        }
    }
    var lower = percentColors[i - 1];
    var upper = percentColors[i];
    var range = upper.pct - lower.pct;
    var rangePct = (pct - lower.pct) / range;
    var pctLower = 1 - rangePct;
    var pctUpper = rangePct;
    var color = {
        r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper),
        g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper),
        b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper)
    };
    return 'rgb(' + [color.r, color.g, color.b].join(',') + ')';
    // or output as hex if preferred
};

Question 3

ফিডলের পাশাপাশি এইচএসএল ব্যবহার করে একটি সাধারণ স্কিম:

function getColor(value){
    //value from 0 to 1
    var hue=((1-value)*120).toString(10);
    return ["hsl(",hue,",100%,50%)"].join("");
}

প্রয়োজন মত স্যাচুরেশন এবং লৌকিকতা। এবং একটি বেহালার ।

function getColor(value) {
  //value from 0 to 1
  var hue = ((1 - value) * 120).toString(10);
  return ["hsl(", hue, ",100%,50%)"].join("");
}
var len = 20;
for (var i = 0; i <= len; i++) {
  var value = i / len;
  var d = document.createElement('div');
  d.textContent = "value=" + value;
  d.style.backgroundColor = getColor(value);
  document.body.appendChild(d);
}

স্নিপেট প্রসারিত করুন

Question 4

কোনও রঙের মানচিত্রের প্রয়োজন ছাড়াই আপনি কয়েকটি লাইনের কোডে (মন্তব্য সহ নয়) এটি করতে পারেন।

function hsl_col_perc(percent, start, end) {
  var a = percent / 100,
      b = (end - start) * a,
      c = b + start;

  // Return a CSS HSL string
  return 'hsl('+c+', 100%, 50%)';
}
//Change the start and end values to reflect the hue map
//Refernece : http://www.ncl.ucar.edu/Applications/Images/colormap_6_3_lg.png

/*
Quick ref:
    0 – red
    60 – yellow
    120 – green
    180 – turquoise
    240 – blue
    300 – pink
    360 – red
*/

উদাহরণ: https://jsfiddle.net/x363g1yc/634/

রঙের মানচিত্রের প্রয়োজন নেই (যদি না এটি একটি অ-রৈখিক রঙ পরিবর্তন হয়, যা জিজ্ঞাসা করা হয়নি)

সতর্কতা: এটি আইই 8 বা এর সাথে সামঞ্জস্য নয়। (ধন্যবাদ বার্নহার্ড ফার্স্ট)

কোড স্নিপেট দেখান

// Just used as a shortcut for below, completely optional
const red = 0,
  yellow = 60,
  green = 120,
  turquoise = 180,
  blue = 240,
  pink = 300;

function hsl_col_perc(percent, start, end) {
  var a = percent / 100,
    b = (end - start) * a,
    c = b + start;

  // Return a CSS HSL string
  return 'hsl(' + c + ', 100%, 50%)';
}

// Simple little animation
var percent = 0,
  progressDiv = document.getElementById('progress'),
  textDiv = document.getElementById('progress-text'),
  progressContainerDiv = document.getElementById('progress-container')

function step(timestamp) {
  percent = (percent < 100) ? percent + 0.5 : 0;

  // Play with me!
  let colour = hsl_col_perc(percent, red, green); //Red -> Green
  progressDiv.style.backgroundColor = colour;
  progressContainerDiv.style.borderColor = colour;
  progressDiv.style.width = percent + '%';
  textDiv.innerHTML = Math.floor(percent);
  window.requestAnimationFrame(step);
}

window.requestAnimationFrame(step);

#progress {
  width: 0%;
  white-space: nowrap;
  text-wrap: none;
  height: 50px;
}

#progress-container {
  border: solid 2px black;
  width: 200px;
}

<h1 id="progress-text"></h1>
<div id="progress-container">
  <div id="progress"></div>
</div>

স্নিপেট প্রসারিত করুন

Question 5

এই পদ্ধতিটি এই ক্ষেত্রে ভালভাবে কাজ করে (0 থেকে 100 শতাংশে):

function getGreenToRed(percent){
            r = percent<50 ? 255 : Math.floor(255-(percent*2-100)*255/100);
            g = percent>50 ? 255 : Math.floor((percent*2)*255/100);
            return 'rgb('+r+','+g+',0)';
        }

Question 6

function hexFromRGBPercent(r, g, b) {
    var hex = [
        Math.floor(r / 100 * 255).toString( 16 ),
        Math.floor(g / 100 * 255).toString( 16 ),
        Math.floor(b / 100 * 255).toString( 16 )
    ];
    $.each( hex, function( nr, val ) {
        if ( val.length === 1 ) {
            hex[ nr ] = "0" + val;
        }
    });
    return hex.join( "" ).toUpperCase();
}

ক্রেডিট অ্যান্ড্রু যায়। তিনি দ্রুত ছিল।

Question 7

আমি জানি এটি মূলত একটি পুরানো জাভাস্ক্রিপ্ট প্রশ্ন, কিন্তু আমি এখানে সিএসএসের কেবলমাত্র সমাধানের সন্ধান করেছি , তাই এটি অন্যকে সমানে সহায়তা করবে: এটি আসলে বেশ সহজ:

শতাংশটি এইচএসএল রঙের মান হিসাবে ব্যবহার করুন! লাল থেকে সবুজ রঙের এইচ থেকে শুরু 0করে 128so (যাতে আপনি চাইলে শতাংশ বাড়িয়ে 1.2দিতে পারেন)। উদাহরণ:

background-color:hsl(perc,100%,50%);

যেখানে পার্কটি %সাইন ছাড়াই কেবল সংখ্যা ।

Question 8

এটিই আমি নিয়ে এসেছি:

function rgbify(maxval, minval, val, moreisgood) {
    var intnsty = (val - minval) / (maxval - minval);
    var r, g;
    if (moreisgood) {
        if (intnsty > 0.5) {
            g = 255;
            r = Math.round(2 * (1 - intnsty) * 255);
        } else {
            r = 255;
            g = Math.round(2 * intnsty * 255);
        }

    } else { //lessisgood
        if (intnsty > 0.5) {
            r = 255;
            g = Math.round(2 * (1 - intnsty) * 255);
        } else {
            g = 255;
            r = Math.round(2 * intnsty * 255);
        }
    }
    return "rgb(" + r.toString() + ", " + g.toString() + ", 0)";
}

jsfiddle

moreisgoodপতাকা টগল উচ্চতর মান বা লাল করা উচিত সবুজ। maxvalএবং minvalআপনার পরিসীমা জন্য প্রান্তিক মান হয়। valআরজিবিতে রূপান্তরিত করার মান

Question 9

থেকে পরিবর্তন redকরতে greenHLS ব্যবহার রঙ। মান 0 থেকে 100 পর্যন্ত হওয়া উচিত, এক্ষেত্রে শতকরা শতাংশ (%)।

function getColorFromRedToGreenByPercentage(value) {
    const hue = Math.round(value);
    return ["hsl(", hue, ", 50%, 50%)"].join("");
}

Question 10

জ্যাকবসের উত্তরের ভিত্তিতে আমি একটি লোডবার তৈরি করেছি। এটি এক থেকে সবুজ থেকে লাল রঙের তবে আপনি রঙগুলি পরিবর্তন করতে পারেন। যারা আগ্রহী তাদের জন্য এখানে আমার কোড এবং জেএসফিডেল ( http://jsfiddle.net/rxR3x/ )

var percentColors = [
    { pct: 0, color: '#00FF00' },   { pct: 3, color: '#12FF00' },   { pct: 6, color: '#24FF00' },
    { pct: 10, color: '#47FF00' },  { pct: 13, color: '#58FF00' },  { pct: 16, color: '#6AFF00' },
    { pct: 20, color: '#7CFF00' },  { pct: 23, color: '#8DFF00' },  { pct: 26, color: '#9FFF00' },
    { pct: 30, color: '#B0FF00' },  { pct: 33, color: '#C2FF00' },  { pct: 36, color: '#D4FF00' },
    { pct: 40, color: '#E5FF00' },  { pct: 43, color: '#F7FF00' },  { pct: 46, color: '#FFF600' },
    { pct: 50, color: '#FFE400' },  { pct: 53, color: '#FFD300' },  { pct: 56, color: '#FFC100' },
    { pct: 60, color: '#FFAF00' },  { pct: 63, color: '#FF9E00' },  { pct: 66, color: '#FF8C00' },
    { pct: 70, color: '#FF7B00' },  { pct: 73, color: '#FF6900' },  { pct: 76, color: '#FF5700' },
    { pct: 80, color: '#FF4600' },  { pct: 83, color: '#FF3400' },  { pct: 86, color: '#FF2300' },
    { pct: 90, color: '#FF1100' },  { pct: 93, color: '#FF0000' },  { pct: 96, color: '#FF0000' },
    { pct: 100, color: '#FF0000' }
];
var getColorPercent = function(selector, percent, time){
    var i = 0;
    var percentInterval = setInterval(function() {
         i++;
         if(percent >= percentColors[i].pct) {
            console.log(percentColors[i].color);
            $(selector).css('background-color', percentColors[i].color);
        }
        if(percentColors[i].pct>=percent) {
            clearInterval(percentInterval);
        }
    }, time/25);
    $(selector).animate({width:(200/100)*percent}, time);
}
getColorPercent('#loadbar_storage', 100, 1500);

কোড স্নিপেট দেখান

var percentColors = [
    { pct: 0, color: '#00FF00' },	{ pct: 3, color: '#12FF00' },	{ pct: 6, color: '#24FF00' },
    { pct: 10, color: '#47FF00' },	{ pct: 13, color: '#58FF00' },	{ pct: 16, color: '#6AFF00' },
    { pct: 20, color: '#7CFF00' },	{ pct: 23, color: '#8DFF00' },	{ pct: 26, color: '#9FFF00' },
    { pct: 30, color: '#B0FF00' },	{ pct: 33, color: '#C2FF00' },	{ pct: 36, color: '#D4FF00' },
    { pct: 40, color: '#E5FF00' },	{ pct: 43, color: '#F7FF00' },	{ pct: 46, color: '#FFF600' },
    { pct: 50, color: '#FFE400' },	{ pct: 53, color: '#FFD300' },	{ pct: 56, color: '#FFC100' },
    { pct: 60, color: '#FFAF00' },	{ pct: 63, color: '#FF9E00' },	{ pct: 66, color: '#FF8C00' },
    { pct: 70, color: '#FF7B00' },	{ pct: 73, color: '#FF6900' },	{ pct: 76, color: '#FF5700' },
    { pct: 80, color: '#FF4600' },	{ pct: 83, color: '#FF3400' },	{ pct: 86, color: '#FF2300' },
    { pct: 90, color: '#FF1100' },	{ pct: 93, color: '#FF0000' },	{ pct: 96, color: '#FF0000' },
    { pct: 100, color: '#FF0000' }
];
var getColorPercent = function(selector, percent, time) {
  var i = 0;
  var percentInterval = setInterval(function() {
    i++;
    if (percent >= percentColors[i].pct) {
      $(selector).css('background-color', percentColors[i].color);
    }
    if (percentColors[i].pct >= percent) {
      clearInterval(percentInterval);
    }
  }, time / 25);
  $(selector).animate({
    width: (200 / 100) * percent
  }, time);
}
getColorPercent('#loadbar', 100, 1500);

#loadbar_wrapper {
  width: 200px;
  height: 25px;
  border: 1px solid #CECECE;
}

#loadbar {
  width: 0px;
  height: 25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loadbar_wrapper">
  <div id="loadbar"></div>
</div>

স্নিপেট প্রসারিত করুন

Question 11

জ্যাকব কোডে এই দুটি লাইন সংশোধন করুন:

var lower = percentColors[i - 1];
var upper = percentColors[i];

প্রতি:

var lower = (i === 0) ?  percentColors[i] : percentColors[i - 1];
var upper = (i === 0) ? percentColors[i + 1] : percentColors[i];

যদি আপনি এটি দুটি চূড়ান্ত জন্য কাজ করতে চান (উদাহরণস্বরূপ 0.0 এবং 1.0)।

Question 12

আমি জানি এটি বিষয়টির কাছে এক ধরণের ধাক্কা, তবে আমি এটি করার আরও একটি উপায় খুঁজে পেয়েছি।

এটি করার জন্য আপনি 100x1 মাত্রার একটি গতিশীল ক্যানভাস তৈরি করতে পারেন এবং এতে গ্রেডিয়েন্ট প্রয়োগ করতে পারেন এবং তারপরে ক্রিয়াকলাপ থেকে আপনাকে কেবলমাত্র শতাংশের পিক্সেল রঙ পেতে হবে।

কোডটি এখানে: এটি বিশ্বব্যাপী:

/* dynamic canvas */

// this should be done once in a page so out of function, makes function faster
var colorBook = $('<canvas />')[0];
colorBook.width = 101;
colorBook.height = 1;
var ctx = colorBook.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 101, 0);
grd.addColorStop(0, "rgb(255,0,0)"); //red
grd.addColorStop(0.5, "rgb(255,255,0)"); //yellow
grd.addColorStop(1, "rgb(0,255,0)"); //green    
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 101, 1);

তারপরে ফাংশন:

function getColor(value) {
  return 'rgba(' + ctx.getImageData(Math.round(value), 0, 1, 1).data.join() + ')';
}

ডেমো: https://jsfiddle.net/asu09csj/

Question 13

এইচএসএল আইক 8-তে jquery-ui-1.10.4 ব্যবহার করে কাজ করবে।

আমি ফাংশনটিতে স্বল্পতা স্বীকার করতে jongo45 এর উত্তরটি পরিবর্তন করেছি।

function getColor(value, lightness) {
    //value from 0 to 1
    var hue = ((value) * 120).toString(10);
    return ["hsl(", hue, ",100%,", lightness, "%)"].join("");
}

Question 14

আমি কিছু কুইজের ফলাফলের পরিসংখ্যান প্রদর্শন করার জন্য একটি চার্ট তৈরি করার সময় ম্যাটিসডাদার কোডটি আমার পক্ষে সত্যিই সহায়ক ছিল। আমি শতাংশের "ক্লিপিং" (সঠিক শব্দটি কী তা নিশ্চিত নয়) এবং রঙ চক্রের সাথে উভয় উপায়ে যেমন, সবুজ (120) থেকে লাল (0) এবং তদ্বিপরীতভাবে কাজ করার অনুমতি দেওয়ার জন্য এটি কিছুটা সংশোধন করেছি।

function pickColourByScale(percent, clip, saturation, start, end)
{
    var a = (percent <= clip) ? 0 : (((percent - clip) / (100 - clip))),
        b = Math.abs(end - start) * a,
        c = (end > start) ? (start + b) : (start - b);
    return 'hsl(' + c + ','+ saturation +'%,50%)';
}

মূলত, স্কেলিংটি ক্লিপ করতে শতাংশের মান সেট করে, সেই মানটির নীচের সমস্ত কিছুই আপনার প্রারম্ভিক রঙ হিসাবে বর্ণযুক্ত হবে। এটি 100% - ক্লিপ অনুসারে স্কেলিংটিকে পুনরায় গণনা করে।

আসুন আমি উদাহরণের দৃশ্যের মধ্য দিয়ে যাই যেখানে আমি নিম্নলিখিত মানগুলি প্রবেশ করি:

শতাংশ: 75
ক্লিপ: 50
স্যাচুরেশন: 100 (গুরুত্বহীন, আমি এটি Chart.js চার্ট হাইলাইট করার জন্য ব্যবহার করি)
শুরু: 0 (লাল)
শেষ: 120 (সবুজ)
1. আমি ক্লিপ থেকে শতাংশ কম কিনা তা পরীক্ষা করে দেখি এবং যদি হয় তবে আমি 0% ফিরিয়ে দিই। অন্যথায়, আমি শতাংশটি পুনরায় গণনা করি - 75% অর্ধেক 50% এবং 100% এর মধ্যে, সুতরাং আমি 50% পাই। এটি আমাকে 0.5 দেয়।
2. আমি শুরু এবং শেষের মধ্যে পার্থক্য পেয়েছি। আপনার প্রারম্ভিক রঙের মানটি আপনার শেষ রঙের মানের চেয়ে বেশি হলে আপনাকে ম্যাথ.এবস () ব্যবহার করতে হবে। তারপরে আমি স্টেপ হুয়ের মানটি অফসেট করতে আমার কতটুকু প্রয়োজন তা দেখার জন্য পদক্ষেপ 1 এ প্রাপ্ত ফলাফলের সাথে আমি পার্থক্যটিকে বহুগুণ করে তুলি।
3. যদি শুরুর মানটি শেষ মানের চেয়ে বেশি হয়, তবে আপনাকে বিপরীত দিকে রঙিন চাকা বরাবর চলতে হবে। সেই অনুযায়ী প্রারম্ভিক মান থেকে যোগ করুন বা বিয়োগ করুন।

আমি শেষ হলুদ, যা লাল এবং সবুজ এর মাঝামাঝি। আমি যদি পদক্ষেপ 1 এ পুনরায় গণনা না করে থাকি তবে আমি আরও সবুজ বর্ণের সাথে শেষ করতাম, যা বিভ্রান্তিকর হতে পারে।

Question 15

সবুজ (০%) থেকে লাল (১০০%) গ্রেডিয়েন্ট দেওয়ার জন্য আমি জেডএমসি এর উত্তরটি পরিবর্তন করেছি।

const getGreenToRed = (percent) => {
    const r = 255 * percent/100;
    const g = 255 - (255 * percent/100);
    return 'rgb('+r+','+g+',0)';
}