Как генерировать случайный цвет для JSCharts

Question

function getRandomColor() { 
      var letters = 'ABCDEF'.split(''); 
      var color = '#'; 
      for (var i = 0; i < 6; i++) { 
       color += letters[Math.floor(Math.random() * 16)]; 
      } 
      return color; 
     } 

Я использую JSCharts в проекте, над которым я работаю, и мне нужен другой цвет для каждого бара в диаграмме графика/диаграммы.

ниже пример работает нормально, но если у меня есть более 6 записей, то это предупредит мне сообщение:

JSChart»Цвет длина массива должен равняться длиной данных в случае пирогов и гистограммы

Как я могу генерировать цвет в зависимости от количества записей

Вот пример набора гистограмма данных:

$.getJSON("http://...", function (data) { 

     var array = $.map(data, function (data) { 
      return [[data.Name, parseInt(data.Id)]]; 
     }); 

     var colors = ['#FA5E1F', '#FDCB3F', '#71D743', '#D23333', '#BAE73F', '#B381C9']; 
     var myChart = new JSChart('graph', 'bar'); 
     myChart.setDataArray(array); 
     myChart.colorizeBars(colors); 
     myChart.setTitle('Title'); 
     myChart.setTitleColor('#8E8E8E'); 
     myChart.setAxisNameX('Orgs'); 
     myChart.setAxisNameY('%'); 
     myChart.setAxisColor('#c6c6c6'); 
     myChart.setAxisWidth(1); 
     myChart.setAxisNameColor('#9a9a9a'); 
     myChart.setAxisValuesColor('#939393'); 
     myChart.setAxisPaddingTop(60); 
     myChart.setAxisPaddingLeft(50); 
     myChart.setAxisPaddingBottom(60); 
     myChart.setTextPaddingBottom(20); 
     myChart.setTextPaddingLeft(15); 
     myChart.setTitleFontSize(11); 
     myChart.setBarBorderWidth(0); 
     myChart.setBarSpacingRatio(50); 
     myChart.setBarValuesColor('#737373'); 
     myChart.setGrid(false); 
     myChart.setSize(616, 321); 
     //myChart.setBackgroundImage('chart_bg.jpg'); 
     myChart.draw(); 
    }); 

Answer 1

Ваша функция выглядит хорошо! Для того, чтобы использовать его для создания цветов в массиве, просто использовать цикл:

function getColorArray(num) { 
    var result = []; 
    for (var i = 0; i < num; i += 1) { 
     var letters = 'ABCDEF'.split(''); 
     var color = '#'; 
     for (var j = 0; j < 6; j += 1) { 
      color += letters[Math.floor(Math.random() * 16)]; 
     } 
     result.push(color); 
    } 
    return result; 
} 

Затем, вы можете получить длину данных, используя Array.length свойства. Заменить эти строки:

var colors = ['#FA5E1F', '#FDCB3F', '#71D743', '#D23333', '#BAE73F', '#B381C9']; 
var myChart = new JSChart('graph', 'bar'); 
myChart.setDataArray(array); 
myChart.colorizeBars(colors); 

с:

var myChart = new JSChart('graph', 'bar'); 
myChart.setDataArray(array); 
myChart.colorizeBars(getColorArray(array.length)); 

Answer 2

Вы можете использовать битовые операторы для генерации случайных шестигранных цветов:

var getRandomColor = function() { 
    var random = Math.random(); 
    var exponent = --random.toExponential().split('-')[1]; 

    random *= Math.pow(10, exponent); 

    return '#' + (~~(random * (1 << 24))).toString(16); 
}; 

Затем вы можете использовать data массив, чтобы определить количество цвета:

// Example data Array. 
var data = [ 1, 2, 4, 5, 6]; 

// The amount of random colors you want to generate. 
var amount = data.length; 

Теперь вы можете создать цикл и создавать свои цвета и подтолкнуть их в colors массиве:

// Will contain the random hex colors. 
var colors = []; 

// Generate colors. 
while(amount--) { 
    colors.push(getRandomColor()); 
} 

Что происходит в getRandomColor():

«высокий» шестнадцатеричное значение является ffffff и «низкий» является 000000, при преобразовании их в десятичных чисел вы получаете:

parseInt('ffffff', 16); // 16777215 
parseInt('000000', 16); // 0 

оказывается, 2^24 равно 16777216, это может быть Calculat ed с использованием bitwise left shift operator, то есть 1 << n сдвигает операнд n бит влево, который равен 2^n. Поэтому 1 << 24 равно 16777216.

Это означает, что до тех пор, пока вы можете предоставить случайное число между 1 и 0.1, чтобы умножить его на 1 << 24, вы всегда получите действительное шестнадцатеричное значение.

Для этого вам необходимо извлечь экспонента из Math.random(), так как он также может возвращать значения, такие как 0.0088248689007014. Если вы этого не сделаете, вы НЕ будете получать правильные шестнадцатеричные значения все время.

Наконец, прежде чем преобразовать случайное число в шестнадцатеричное значение, вы можете использовать double ~~, чтобы удалить все после десятичной точки.

Вы можете найти более подробную информацию о двойном оператора побитового in this question