如何为 JSCharts 生成随机颜色答案

【问题标题】：How to generate random color for JSCharts如何为 JSCharts 生成随机颜色
【发布时间】：2015-07-29 19:22:35
【问题描述】：

function getRandomColor() {
            var letters = '0123456789ABCDEF'.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();
    });

【问题讨论】：

你有没有试过做一个生成颜色的函数？想想你所知道的。您将需要生成 6 个十六进制值或 3 个小于 256 的整数。我很乐意提供帮助，但您似乎甚至没有尝试自己解决它。
好的，更新了我的问题有两个问题，所以我写的函数 1）我必须传递计数 2）我没有返回数组

标签： javascript jquery arrays function jscharts

【解决方案1】：

你的函数看起来不错！要使用它在数组中生成颜色，只需使用循环：

function getColorArray(num) {
    var result = [];
    for (var i = 0; i < num; i += 1) {
        var letters = '0123456789ABCDEF'.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));

【讨论】：

谢谢，getColorArray 没有返回一组数组，它只返回最后一个，当我调试时。
在 cosole.debug 中我得到最后一种颜色，没有数组颜色 ["#9BB08E"]

【解决方案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，这可以使用bitwise left shift operator 计算，即1 << n 将操作数n 向左移动，等于2^n。因此1 << 24 等于16777216。

这意味着，只要您可以提供一个介于 1 和 0.1 之间的随机数以将其与 1 << 24 相乘，您将始终得到一个有效的十六进制值。

为确保这一点，您需要从Math.random() 中提取指数，因为它也可以返回像0.0088248689007014 这样的值。如果你不这样做，你将不会一直得到正确的十六进制值。

最后，在将随机数转换为十六进制值之前，您可以使用~~ double bitwise not operator 删除小数点后的所有内容。

你可以找到更多关于双位运算符in this question的信息

【讨论】：