javascript - 莫里斯图表多色

嗨，我将以下代码用于我的莫里斯图表，它工作正常。但是我需要使线条的颜色不同，所以1-3是绿色，4-6是橙色，7-10是红色。

    function init_morris_charts() {

        if( typeof (Morris) === 'undefined'){ return; }
        console.log('init_morris_charts');

        if ($('#graph_bar').length){

            Morris.Bar({
              element: 'graph_bar',
              data: [
                {device: '1', geekbench: <?php echo $grade1Value; ?>},
                {device: '2', geekbench: <?php echo $grade2Value; ?>},
                {device: '3', geekbench: <?php echo $grade3Value; ?>},
                {device: '4', geekbench: <?php echo $grade4Value; ?>},
                {device: '5', geekbench: <?php echo $grade5Value; ?>},
                {device: '6', geekbench: <?php echo $grade6Value; ?>},
                {device: '7', geekbench: <?php echo $grade7Value; ?>},
                {device: '8', geekbench: <?php echo $grade8Value; ?>},
                {device: '9', geekbench: <?php echo $grade9Value; ?>},
                {device: '10', geekbench: <?php echo $grade10Value; ?>},
                {device: 'NA', geekbench: <?php echo $gradeNAValue; ?>}
              ],
              xkey: 'device',
              ykeys: ['geekbench'],
              labels: ['No Of Buyers'],
              barRatio: 0.4,
              barColors: ['#26B99A', '#34495E', '#ACADAC', '#3498DB'],
              xLabelAngle: 45,
              hideHover: 'auto',
              resize: true
            });

        }

有什么想法可以做到这一点吗？我可以看到＃26B99A是条形颜色，但这是每行的颜色。

谢谢

最佳答案

您可以在barColors中定义一个函数，该函数将根据需要返回颜色，如下所示：

    barColors: function(a) {
        if (0 <= a.x && a.x < 3) { return 'green'; }
        else if (3 <= a.x && a.x < 6) { return 'orange'; }
        else { return 'red'; }
    },