Цветовая шкала, основанная на диапазоне, рассчитанном по другому набору данных - PullRequest
1 голос
/ 18 января 2020

Для каждого значения в t2actual я окрашиваю полосу в зависимости от диапазона критериев. Я хочу получить значение в том же индексе t2setpoint и использовать арифметику c для вычисления моих максимумов и минимумов вместо констант, как показано ниже:

        colors: {
            t2setpoint: '#77777a',
            drybulb: '#4d4d4f',
            t2actual: 
                function(d) {
                    if (d.value >= 44.5 && d.value <= 45.5) {
                        return '#218340';
                    } else if (d.value >= 44.0 && d.value <= 44.4 || d.value >= 45.6 && d.value <= 50) {
                        return '#f7b731';
                    } else {
                        return '#f7b731';
                    }
                }
        },

Обратите внимание, что я не могу искать массив для значения, чтобы найти положение как t2setpoint и t2actual, может иметь повторяющиеся значения в массиве. Это должно быть положение базы. Это должно выглядеть примерно так: псевдокод ниже:

                t2actual: 
                function(t2act) {
                    if (t2act.value >= t2set.value - 0.5 && t2act.value <= t2set.value + 0.5) {
                        return '#218340';
                    } else if (t2act.value >= t2set.value - 1 && t2act.value <= t2set.value + 1) {
                        return '#f7b731';
                    } else {
                        return '#a62337';
                    }
                }

Как получить значение t2setpoint (t2set), которое находится в том же индексе, что и значение в t2actual (t2act) для приведенного выше расчета?

Весь код:

 (function($) {
"use strict";
var chart = c3.generate({
    data: {
        columns: [
            // each columns data
            ['t2setpoint', 45.1, 45, 45.4, 45, 45.2, 45, 45, 45, 45, 48.1, 45, 45, 45, 45, 45.1, 46, 46, 46],
            ['drybulb', 82.3, 82.3, 82.3, 82.3, 82.3, 82.3, 82.3, 82.3, 82.3, 82.3, 82.3, 82.3, 82.3, 82.3, 82.3, 82.3, 82.3, 82.3],
            ['t2actual', 44, 45, 45, 46, 47, 46, 45, 45, 45, 44, 45, 46, 45, 47, 46, 45, 44, 45]
        ],
        axes: {
            t2setpoint: 'y',
            drybulb: 'y',
            t2actual: 'y2'
        },
        type: 'bar', // default type of chart
        types: {
            't2setpoint': "spline",
            'drybulb': "spline",
        },
        groups: [
            ['t2actual']
        ],
        colors: {
            t2setpoint: '#77777a',
            drybulb: '#4d4d4f',
            t2actual: 
                function(d) {
                    if (d.value >= 44.5 && d.value <= 45.5) {
                        return '#218340';
                    } else if (d.value >= 44.0 && d.value <= 44.4 || d.value >= 45.6 && d.value <= 50) {
                        return '#f7b731';
                    } else {
                        return '#f7b731';
                    }
                }

                /*
            t2actual: 
                function(t2act) {
                    if (t2act.value >= t2set.value - 0.5 && t2act.value <= t2set.value + 0.5) {
                        return '#218340';
                    } else if (t2act.value >= t2set.value - 1 && t2act.value <= t2set.value + 1) {
                        return '#f7b731';
                    } else {
                        return '#a62337';
                    }
                }
                */
        },
    axis: {
        x: {
            type: 'category',
            label: {
                text: '',
                position: 'outer-center'
            },
            tick: {
                rotate: -75,
                multiline: false
            },
            height: 70,
            categories: [1', 2', 3', 4', 5', 6', 7', 8', 9', 10', 11', 12', 13', 14', 15', 16', 17', 18']
        },
        y: {
            min: 30,
            max: 100,
            label: {
                text: 'Dry Bulb',
                position: 'outer-middle'
            }
        },
        y2: {
            min: 30,
            max: 100,
            show: true,
            label: {
                text: 'T2 Actual',
                position: 'outer-middle'
            }
        }
    },
    bar: {
        width: 50
    },
    legend: {
        show: true, //hide legend
    },
    padding: {
        bottom: 0,
        top: 0,
    },
});
})(jQuery);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...