莫里斯酒吧的不同颜色:(独特)

Question

我正在尝试使用两种颜色显示莫里斯条形图，这些颜色表示项目（条形）的状态。例如，假设我有 5 个成员（A、B、C、D、E）。在左侧，我有他们的身高。为我完成此操作的 JavaScript 代码如下。

Morris.Bar({
    element: 'members-chart',
    data: [
        <c:forEach items="${Members}" var="member">
            {
                member_name: "${member.name}",
                height: "${member.height}",
                active: "${member.active}"
            },
        </c:forEach>
            ],
    xkey: 'member_name',
    ykeys: ['height'],
    labels: ['Height'],
    pointSize: 2,
    hideHover: 'auto',
    resize: true
}); 

现在你会看到我已经在那里放置了活动："${member.active}"，但它并没有真正做任何事情。我想根据这个值更改颜色。例如，如果 memberA.active = true，则颜色应为蓝色，如果 memberB.active = false，则颜色应为灰色。我不确定我是否可以以某种方式使用 barColors 函数来解决我的问题，但相信我已经尝试过了。

还看了 改变条形颜色与莫里斯.js条形图？

任何帮助将不胜感激。只要给我指出正确的方向！谢谢！

Answer 1

您的数据数组无效，因为您在最后一个条目后添加了逗号。在forEach上使用varStatus并检查上次迭代以设置逗号。

        <c:forEach items="${Members}" var="member" varStatus="status">
            {
                member_name: "${member.name}",
                height: "${member.height}",
                active: "${member.active}"
            }${!status.last ? ',' : ''}
        </c:forEach>