Javascript generieren zufällige Farbe mit äquivalenten Highlight

Ich arbeite mit charts.js Bibliothek und ich muss zufällige Farben für die Charts-Einheiten generieren.Javascript generieren zufällige Farbe mit äquivalenten Highlight

Ich sah viele Antworten auf, wie man das macht. Wie zum Beispiel Anatoliy answer.

Die Sache ist, ich brauche es gleichwertige Highlight-Farbe als auch (oder irgendeine enge Farbe), um das "Highlight" -Feld der Charts.js Pie zu erfüllen.

{ 
    value: 300, 
    color: "#30a5ff", 
    highlight: "#62b9fb", 
    label: "Label" 
},

Quelle

2017-02-10 Jacob

Wenn Sie stimmen, bitte eine Erklärung zumindest liefern. Ich denke, das ist ein sehr häufiges Szenario bei der Arbeit mit charts.js. – Jacob

Wie ist die Beziehung zwischen der Originalfarbe und der Hervorhebungsfarbe? Farbkomplement? Nur zwei zufällig verschiedene Farben? Derselbe Farbton, aber dunkler/heller? ... –

Wie ich geschrieben habe, wäre jede enge Farbe in Ordnung, die heller wäre perfekt. – Jacob

Hier ist eine von vielen möglichen Lösungen. Erhalten Sie einen zufälligen Farbton zwischen 0 und 360. Verwenden Sie 100% Sättigung und 50% Helligkeit für die Hauptfarbe und 100% Sättigung und, sagen wir, 80% Helligkeit für die "Highlight" -Farbe. Klicken Sie einfach auf die Schaltfläche "Code-Snippet ausführen", um mehr zufällige Farben zu sehen.

document.querySelectorAll('div').forEach(d => { 
 
    const hue = Math.floor(Math.random() * 360); 
 
    d.style.backgroundColor = `hsl(${hue}, 100%, 50%)`; 
 
    d.style.borderColor  = `hsl(${hue}, 100%, 80%)`; 
 
});

div { 
 
    display: inline-block; 
 
    width: 20px; 
 
    height: 20px; 
 
    border: solid 5px; 
 
    margin: 5px; 
 
}

<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div>

Quelle

2017-02-10 02:55:23

Javascript generieren zufällige Farbe mit äquivalenten Highlight

Antwort

Verwandte Themen