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);