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

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 语句：is ['amount1', 'amount2'] equal to 'amount1'?然后 tt returns false 所以它进入 else 块和 returns '#5e2590'.

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

顺便说一句，我写的时候没有任何特定的 Morris.js 知识，所以如果有任何魔法 Morris.js 会使得 barColors 函数内部工作而无需访问数组元素或遍历数组，那我就不知道了。

尝试使用 chrome 开发工具检查变量和属性，或使用 console.log 查看您的代码获得的值。这将帮助您在遇到此类问题时畅通无阻。

Answer 2

我不确定你为什么要为此使用一个函数，在我看来你可以用一个简单的数组设置选项 barColors:

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

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

Change Default Colors Of Morris.js Bar Chart

javascript

bar-chart

morris.js