Question

我正在尝试使用两种颜色来显示morris条形图，这两种颜色代表项目（条形）的状态。例如，假设我有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
});

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

还查看了Varying bar colors with morris.js bar chart?

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

Answer 1

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

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

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

1 个答案: