Question

我正在使用charts.js库，我需要为图表单元生成随机颜色。

我看到了很多关于如何做到这一点的答案。例如Anatoliy answer。

问题是，我需要它等效的高亮颜色（或任何接近的颜色）来实现charts.js Pie的'highlight'字段。

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

Answer 1

这是许多可能解决方案中的一个。获得0到360之间的随机色调。使用100％饱和度和50％亮度作为主色，100％饱和度，例如80％亮度用于＆＃34;突出显示＆＃34;颜色。只需点击＆＃34;运行代码段＆＃34;按钮可以看到更多随机颜色。

＆＃13;

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%)`;
});

＆＃13;

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

＆＃13;

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

＆＃13;

Javascript生成具有等效突出显示的随机颜色

1 个答案: