Question

我刚刚开始使用Morris.js条形图源，并且在尝试使两个不同的Y键的条形具有不同的颜色方面遇到了一个小问题。但是由于某种原因，我得到的结果是它只是设置一种颜色而没有运行其他颜色。

<script>
    new Morris.Bar({
        element: 'bar-chart',
        data: [
            { day: 'Day 1', amount1: 1, amount2: 1 },
            { day: 'Day 2', amount1: 2, amount2: 1 },
            { day: 'Day 3', amount1: 3, amount2: 2 },
            { day: 'Day 4', amount1: 4, amount2: 2 },
            { day: 'Day 5', amount1: 5, amount2: 3 },
            { day: 'Day 6', amount1: 6, amount2: 3 },
            { day: 'Day 7', amount1: 7, amount2: 4 }
        ],
        xkey: 'day',
        ykeys: ['amount1', 'amount2'],
        labels: ['Amount One', 'Amount Two'],

        hideHover: 'auto',

        barColors: function(row,series,type){
            if(row.ykeys=='amount1'){
                return "#9b5cd4";
            } 
            else {
                return "#5e2590";
            }
        }

    });
</script>

Answer 1

让我从以下假设开始：

- barColors函数收到的'row'参数是一个数组，该数组包含您在 ykeys 属性中具有的值。这些是['amount1'，'amount2'];

-barColors函数中没有引用ykeys数组的特定位置的 ，因此您的if条件总是将数组与字符串进行比较，并且始终为假 >。

如果我的假设成立，那么一旦函数读取 row.ykeys 值，它就会显示 ['amount1'，'amount2'] ；然后继续执行if语句： ['amount1'，'amount2']是否等于'amount1'？然后tt返回false，因此进入else块并返回'＃5e2590'。

那里只是一点逻辑故障。尝试指定要与之比较的row.ykeys值中的哪一个。

顺便说一句，我写的时候没有任何特定的Morris.js知识，因此，如果有任何不可思议的Morris.js做到这一点，那么即使在barColors函数内部工作时也无需访问数组元素或遍历数组，那对我来说是未知的。

尝试使用chrome开发工具检查变量和属性，或使用console.log查看代码获取的值。这样的问题阻止您时，这将帮助您不受阻碍。

Answer 2

我不确定您为什么要为此使用功能，我认为您可以使用以下简单数组设置选项 barColors ：

barColors:['#9b5cd4', '#5e2590'],

更改Morris.js条形图的默认颜色

2 个答案: