Javascript 使用 morris.js 条形图改变条形颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26763825/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Varying bar colors with morris.js bar chart?
提问by pooja-bangar
I'm a JavaScript beginner using morris.js to create a bar chart where I need each bar containing a y value to be a different color. The code below shows what I've done so far
我是一名 JavaScript 初学者，使用 morris.js 创建一个条形图，我需要每个包含 y 值的条形为不同的颜色。下面的代码显示了我到目前为止所做的
Morris.Bar({
element: 'calls-made',
data: [
{ y: 'Person A', a: 10 },
{ y: 'Person B', a: 15 },
{ y: 'Person C', a: 12 },
{ y: 'Person D', a: 20 }
],
xkey: 'y',
ykeys: ['a'],
labels: ['Calls'],
barColors: ["#B21516", "#1531B2", "#1AB244", "#B29215"],
hideHover: 'always',
});
I would like the bar for 'Person A' to be one color and then 'Person B' to be another color and so on, but at the moment all bars are being displayed as the first color in the array. Does anyone know if there is a way to do this? Many thanks!
我希望“人 A”的条形为一种颜色，然后“人 B”为另一种颜色，依此类推，但目前所有条形都显示为数组中的第一种颜色。有谁知道是否有办法做到这一点？非常感谢！
回答by SunilR
Morris.Bar({
element: 'bar-example',
data: [
{ y: 'Person A', a: 10 },
{ y: 'Person B', a: 15 },
{ y: 'Person C', a: 12 },
{ y: 'Person D', a: 20 }
],
xkey: 'y',
ykeys: ['a'],
labels: ['Calls'],
hideHover: 'always',
barColors: function (row, series, type) {
console.log("--> "+row.label, series, type);
if(row.label == "Person A") return "#AD1D28";
else if(row.label == "Person B") return "#DEBB27";
else if(row.label == "Person C") return "#fec04c";
else if(row.label == "Person D") return "#1AB244";
}
});
回答by Marcelo
I did something similar, but with dynamic items.
我做了类似的事情，但使用动态项目。
var $arrColors = ['#34495E', '#26B99A', '#666', '#3498DB'];
Morris.Bar({
element: 'div-bars',
data: [
{ITENS-DYNAMIC-HERE}
],
xkey: 'item',
ykeys: ['value'],
labels: ['Atendimentos'],
barColors: function (row, series, type) {
return $arrColors[row.x];
},
hideHover: 'auto',
resize: true
});
回答by Vutlhari Ndlovhu
I found a way to change the colors even if the list is more that four values. If anyone ever comes this way looking for an answer
即使列表超过四个值，我也找到了一种更改颜色的方法。如果有人以这种方式来寻找答案
var barColorsArray = ['#3498DB', '#34495E','#26B99A', '#DE8244'];
var colorIndex = 0;
Morris.Bar({
element: 'graph_bar',
data: [DYNAMIC_VALUES_HERE]
,
xkey: 'groupedBy',
ykeys: ['Numbers' ],
labels: ['Names'],
barRatio: 0.4,
barColors: function () {
if(colorIndex < 4)
return barColorsArray[++colorIndex];
else{
colorIndex = 0;
return barColorsArray[++colorIndex];
}
},
xLabelAngle: 35,
hideHover: 'auto',
resize: true
});
