如何为 JSCharts 生成随机颜色
How to generate random color for JSCharts
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,我需要为 Graph/Bar 图表中的每个条使用不同的颜色。
下面的例子工作正常,但如果我有超过 6 条记录,它会提醒我一条消息:
JSChart" Colors array length must equal data length in case of pie and
bar graphs
如何根据记录数生成颜色?
下面是条形图数据集的示例:
$.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();
});
你的功能看起来不错!要使用它来生成数组中的颜色,只需使用一个循环:
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));
您可以使用位运算符生成随机的十六进制颜色:
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()
发生了什么:
'highest' 十六进制值为 ffffff
而 'lowest' 为 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()
中提取指数,因为它也可以 return 值,例如 0.0088248689007014
。如果您不这样做,您将无法始终获得正确的十六进制值。
最后,在将随机数转换为十六进制值之前,您可以使用 ~~
双 bitwise not operator 删除小数点后的所有内容。
您可以找到有关双按位运算符的更多信息 in this question
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,我需要为 Graph/Bar 图表中的每个条使用不同的颜色。
下面的例子工作正常,但如果我有超过 6 条记录,它会提醒我一条消息:
JSChart" Colors array length must equal data length in case of pie and bar graphs
如何根据记录数生成颜色?
下面是条形图数据集的示例:
$.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();
});
你的功能看起来不错!要使用它来生成数组中的颜色,只需使用一个循环:
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));
您可以使用位运算符生成随机的十六进制颜色:
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()
发生了什么:
'highest' 十六进制值为 ffffff
而 'lowest' 为 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()
中提取指数,因为它也可以 return 值,例如 0.0088248689007014
。如果您不这样做,您将无法始终获得正确的十六进制值。
最后,在将随机数转换为十六进制值之前,您可以使用 ~~
双 bitwise not operator 删除小数点后的所有内容。
您可以找到有关双按位运算符的更多信息 in this question