莫里斯图表多色答案

【问题标题】：Morris Chart Multi Colours莫里斯图表多色
【发布时间】：2020-02-09 17:13:59
【问题描述】：

您好，我在我的莫里斯图表中使用了以下代码，它工作正常。但我需要让线条颜色不同，所以 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 是条形颜色，但这是每一行的颜色。

谢谢

【问题讨论】：

标签： javascript morris.js

【解决方案1】：

您可以在 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'; }
    },

【讨论】：