Morris Chart Multi Colours - PullRequest
Новая
       10

Morris Chart Multi Colours

1 голос
/ 09 февраля 2020

Привет, я использую следующий код для моей диаграммы Морриса, и он работает нормально. Но мне нужно сделать линии разных цветов, чтобы 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 - это цвет полосы, но это цвет для каждой линии.

спасибо

1 Ответ

0 голосов
/ 26 февраля 2020

Вы можете определить функцию в 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'; }
    },
...