每次Javascript加载随机颜色

Question

我正在使用js从引导模板生成图形。

此图显示约会类型和值的列表

try {
    //bar chart
    var ctx = document.getElementById("ReferralTypeWeekly");
    if (ctx) {
      ctx.height = 200;
      var myChart = new Chart(ctx, {
        type: 'bar',
        defaultFontFamily: 'Poppins',
        data: {
          labels: ["Apt Type 1", "Apt Type 2", "Apt Type 3", "Apt Type 4", "Apt Type 5", "Apt Type 6", "Apt Type 7", "Apt Type 8", "Apt Type 9", "Apt Type 10", "Apt Type 11"],
          datasets: [
            {
              label: "Week 06",
              data: [7, 31, 47, 41, 10, 42, 3, 19, 16, 24, 0, 26],
              borderColor: "rgba(0, 123, 255, 0.9)",
              borderWidth: "0",
              backgroundColor: "rgba(0, 123, 255, 0.5)",
              fontFamily: "Poppins"
            },
            {
              label: "Week 07",
              data: [10, 67, 112, 57, 21, 39, 9, 23, 30, 26, 9, 54],
              borderColor: "rgba(0,0,0,0.09)",
              borderWidth: "0",
              backgroundColor: "rgba(123, 255, 0,0.5)",
              fontFamily: "Poppins"
            },
            {
              label: "Week 08",
              data: [4, 47, 93, 58, 21, 29, 6, 10, 32, 30, 6, 33],
              borderColor: "rgba(0,0,0,0.09)",
              borderWidth: "0",
              backgroundColor: "rgba(255, 0, 123,0.5)",
              fontFamily: "Poppins"
            }
          ]
        },
        options: {
          legend: {
            position: 'top',
            labels: {
              fontFamily: 'Poppins'
            }

          },
          scales: {
            xAxes: [{
              ticks: {
                fontFamily: "Poppins"

              }
            }],
            yAxes: [{
              ticks: {
                beginAtZero: true,
                fontFamily: "Poppins"
              }
            }]
          }
        }
      });
    }


  } catch (error) {
    console.log(error);
  }

在线

borderColor: "rgba(0, 123, 255, 0.9)",

和

backgroundColor: "rgba(0, 123, 255, 0.5)",

我想从预设列表中随机生成这些颜色，但是对于每个集合，它们是唯一的颜色，但是对于每个值，它们的borderColor和backgroundColor都是相同的颜色。

我在这里搜索，但是甚至不知道从哪里开始。

我的其他一些图使用多个数据集（不像这个示例那样只有2个）。

期待人们对我的起点提出建议

欢呼

更新：这里是这张照片

Answer 1

您可以splice以随机索引来访问数组。

var predefinedList = ["0,0,0", "255,255,255", "255,0,0", "0,255,0", "128,128,128", "0,128,0"];

function getRandomColor() {
  return predefinedList.splice(Math.floor(Math.random() * predefinedList.length), 1)[0];
}

document.querySelector("#test").addEventListener("click", function() {
  console.log(getRandomColor());
});

<button id="test">New Color</button>

如果您想向predefinedList添加随机值，可以这样做（最多可以创建256种唯一颜色）：

var start = Date.now();

function fillArray(size, callBack) {
  return Array.apply(null, Array(size)).map(callBack);
}

function getIndex(val, index) {
  return index;
}

var r = fillArray(256, getIndex);
var g = fillArray(256, getIndex);
var b = fillArray(256, getIndex);

var predefinedList = fillArray(256, function() {
  return [r, g, b].map(function(color) {
    return color.splice(Math.floor(Math.random() * color.length), 1)[0];
  }).join(",");
});

console.log("Milliseconds elapsed: " + (Date.now() - start));

console.log(predefinedList);

您可以将两者结合使用以获取此信息：

function fillArray(size, callBack) {
  return Array.apply(null, Array(size)).map(callBack);
}

function getIndex(val, index) {
  return index;
}

var r = fillArray(256, getIndex);
var g = fillArray(256, getIndex);
var b = fillArray(256, getIndex);

var predefinedList = fillArray(256, function() {
  return `rgb(${[r, g, b].map(function(color) {
    return color.splice(Math.floor(Math.random() * color.length), 1)[0];
  }).join(",")})`;
});


function getRandomColor() {
  return predefinedList.splice(Math.floor(Math.random() * predefinedList.length), 1)[0];
}

var container = document.querySelector("#container");
var color = getRandomColor();

while (color){
  var newDiv = document.createElement("div");
  newDiv.setAttribute("style", `background-color: ${color};`);
  container.appendChild(newDiv);
  color = getRandomColor();
} 

#container>div {
  width: 20px;
  height: 20px;
  float: left;
}

<div id="container"></div>

您还可以通过以下方式创建r，b和g数组：

function fillArray(size, callBack) {
  return Array.apply(null, Array(size)).map(callBack);
}

function createIndexFunction(start, multiplier) {
  return function(val, index) {
    return start + index * multiplier;
  }
}

var r = fillArray(26, createIndexFunction(0, 10));
// 26 (how many elements to create)
// 0 (start with r: 0 )
// 10 (skip 10 records r: 0, r: 10 ... r: 250)
var g = fillArray(26, createIndexFunction(200, 1));
// 26 (how many elements to create)
// 0 (start with g: 200 )
// 1 (don't skip any records)
var b = fillArray(26, createIndexFunction(50, 5));
// 26 (how many elements to create)
// 0 (start with b: 50 )
// 5 (skip 5 records b: 50, b: 55 ... b: 175)

console.log(r);
console.log(g);
console.log(b);