使用morris.js条形图改变酒吧颜色？ [英] Varying bar colors with morris.js bar chart?

问题描述

我是一名JavaScript初学者，使用morris.js创建一个条形图，我需要每个包含y值的栏都是不同的颜色。下面的代码显示了我到目前为止所做的事情

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

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',
});

我希望'人A'的栏为一种颜色然后'人B'为是另一种颜色，依此类推，但目前所有的条形都显示为数组中的第一种颜色。有谁知道有没有办法做到这一点？
非常感谢！

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!

推荐答案

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";
}
});

这篇关于使用morris.js条形图改变酒吧颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！