具有最佳随机背景颜色的图表.js饼图

const CONTRAST_THRESHOLD = 6;

let randomColor = (prevColor = '#fff') => {
    const characters='0123456789ABCDEF';
    let currentColor;
    do {
        currentColor = '';
        for (let i = 0; i < 6; i++) {
            let randomIndex=Math.floor(Math.random()*characters.length);
            currentColor+=characters.charAt(randomIndex);
        }
    } while (wcagContrast.hex(prevColor, currentColor) < CONTRAST_THRESHOLD)

    return '#'+currentColor;
}

let checkFirstAndLastColor = (colorsArray) => {
    while (wcagContrast.hex(colorsArray[0], colorsArray[colorsArray.length -1]) < CONTRAST_THRESHOLD || wcagContrast.hex(colorsArray[0], colorsArray[1]) < CONTRAST_THRESHOLD) {
        colorsArray[0] = randomColor(colorsArray[1]);
    }
}

let round = (num) => Math.round(num*100)/100;

let chart = null;
$('#generate').click(()=>{
    let data = [];
    let labels = [];
    let pieces = $('#pieces').val();
    for(let i=0; i<pieces; i++) {
        labels.push(randomColor(labels[i - 1]));
        data.push(round(1/pieces));
    }
    if (labels.length > 2) {
        checkFirstAndLastColor(labels);
    }
    if(chart) chart.destroy();
    chart = new Chart($('#chart'), {
        type: 'pie',
        data: {
            labels: labels,
            datasets: [{
                data: data,
                backgroundColor: labels,
                borderWidth: 0
            }]
        },
        options: {
            plugins: {
                tooltip: {
                    callbacks: {
                        label: (context) => {
                            return context.parsed;
                        }
                    }
                }
            }
        }
    });
});

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

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="
https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.min.js
"></script>
<div>
  <input id="pieces" type="number" value="20" />
  <button id="generate">Generate Chart</button>
</div>
<canvas id="chart"></canvas>

let minContrast = 2;

let randomByHsl = (colorNum) =>
{
    let hues = [0, 20, 30, 40, 50, 60, 80, 120, 160, 190, 210, 230, 260, 290, 330, 360];
    //hues = [...Array(37).keys()].map(x=>x*10);
    let lights = [20, 25, 30, 35, 40, 43, 45, 48, 50, 53, 55, 58, 60, 63, 65, 68, 70, 73, 75, 80];
    let goldenFrac = 0.5 * (3 - Math.sqrt(5));
    let x = (colorNum * goldenFrac % 1.0) * (hues.length - 1);
    //x=colorNum%(hues.length-1); // for point visualisation
    let i = Math.floor(x);
    let f = x % 1.0;
    let hue = (1.0 - f) * hues[i] + f * hues[i + 1];
    let light = (1.0 - f) * lights[i] + f * lights[i + 1];
    return [Math.round(hue * 100) / 100, 100, Math.round(light * 100) / 100];
}

let hslToHex = (h, s, l) =>
{
  l /= 100;
  s /= 100;

  const a = s * Math.min(l, 1 - l);
  const f = (n, h, l, a) => {
    const k = (n + h / 30) % 12;
    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
    return Math.round(255 * color).toString(16).padStart(2, '0');
  };

  const red = f(0, h, l, a);
  const green = f(8, h, l, a);
  const blue = f(4, h, l, a);

  return `#${red}${green}${blue}`;
}

let makeColor = (colorNum) =>
{
  let newColor = randomByHsl(colorNum);
  return hslToHex(...newColor);
}

let calculateContrast = (color1, color2) =>
{
  return chroma.contrast(color1, color2);
}

let contrastCheck = (color, toCompare) =>
{
  if(toCompare.length)
  {
    let contrasts = [];

    toCompare.forEach((colorToCompare) =>
    {
      contrasts.push(calculateContrast(color, colorToCompare));
    });

    return contrasts.every(contrast => contrast > minContrast);
  }
  else
  {
    return true;
  }
}

let generateColors = (pieces) =>
{
  let labels = [];
  let data = [];
  let previousColor = null;
  let regeneratColorIteration = 1;

  for (let i = 0; i < pieces; i++)
  {
    regeneratColorIteration++;

    let newColor = makeColor(regeneratColorIteration);
    let colorsToCompare = [];

    if(previousColor)
    {
      colorsToCompare.push(previousColor);
    }

    if(i == pieces - 1
    && i != 0)
    {
      colorsToCompare.push(labels[0]);
    }

    while(labels.includes(newColor)
    && ! contrastCheck(newColor, colorsToCompare))
    {
        regeneratColorIteration++;
        newColor = makeColor(regeneratColorIteration);
    }

    labels.push(newColor);
    data.push(round(1 / pieces));
    previousColor = newColor;
  }

  return { labels, data };
}

let round = (num) => Math.round(num * 100) / 100;
let chart = null;

$('#generate').click(() =>
{
    let pieces = $('#pieces').val();

    if(chart)
    {
        chart.destroy();
    }

    const { labels, data } = generateColors(pieces);

    chart = new Chart($('#chart'),
    {
        type: 'pie',
        data:
        {
            labels: labels,
            datasets:
            [{
                data: data,
                backgroundColor: labels,
                borderWidth: 0
            }]
        },
        options:
        {
            plugins:
            {
                tooltip:
                {
                    callbacks:
                    {
                        label: (context) => 
                        {
                            return context.parsed;
                        }
                    }
                }
            }
        }
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.1/chroma.min.js"></script>

        <div>
          <input id="pieces" type="number" value="20" />
          <button id="generate">Generate Chart</button>
        </div>
        <canvas id="chart"></canvas>