Диаграмма C3 Ошибка / ошибка - пошаговый линейный график - PullRequest
Новая
       13

Диаграмма C3 Ошибка / ошибка - пошаговый линейный график

0 голосов
/ 04 июля 2018

Я создаю график, где в одной ситуации линия падает на некоторый уровень%, а во второй ситуации она должна создать вертикальную линию и продолжить на том же уровне, как и до этой точки слева

Поскольку это тип «Step-after», логика должна быть прямой => Двигаться по X, пока не достигнет следующей точки, затем перейти от предыдущего Y к новому и повторить

Но эта логика, кажется, не работает, как показано на рисунках ниже.

Данные графика генерируются в коде PHP: 

...
    foreach ($parsedData as $d) {

        if (!$d['survival']) {
            // LEVEL DROP SCENARIO 
            $maxY = $maxY - (1 / count($parsedData)) * 100;
            $maxY = ($maxY < 0) ? 0 : $maxY;
        } else if ($type == StatsChartMaker::TYPE_FULL) {
            // CREATES VERTICAL LINE
            array_push($series[$id]['Y'], $maxY + 2);
            array_push($series[$id]['X'], $d['time']);
            array_push($series[$id]['Y'], $maxY - 2);
            array_push($series[$id]['X'], $d['time']);
        }
        array_push($series[$id]['X'], $d['time']);
        array_push($series[$id]['Y'], $maxY);
    }
...

и обрабатывается JavaScript: 

var chartFullSurvive = c3.generate({
    bindto: '#chart-FullSurvive',
    data: {
        xs: {
            'Data1': 'x1',
            'Data2': 'x2',
            'Data3': 'x3',
            'Data4': 'x4'
        },
        columns: [
            osdata[1]['X'],
            osdata[1]['Y'],
            osdata[2]['X'],
            osdata[2]['Y'],
            osdata[3]['X'],
            osdata[3]['Y'],
            osdata[4]['X'],
            osdata[4]['Y'],
        ],
        types: {
            Data1: 'step',
            Data2: 'step',
            Data3: 'step',
            Data4: 'step',
        },
        colors: {
            Data1: '#4981e9',
            Data2: '#ff8c00',
            Data3: '#009900',
            Data4: '#e60000',

        }
    },
    tooltip: {
        show: true,
        format: {
            title: function (d) {
                return d + ' dní od diagnózy';
            },
            value: function (value) {
                return Math.round(value * 100) / 100;
            }
        }
    },
    grid: {
        x: {
            show: false,
            lines: [
                {value: 30, text: '30 dní'},
                {value: 91.25, text: '1/4 roku'},
                {value: 182.5, text: '1/2 roku'},
                {value: 365, text: '1 rok'},
                {value: 730, text: '2 roky'},
                {value: 1095, text: '3 roky'},
                {value: 1460, text: '4 roky'},
                {value: 1825, text: '5 let'},
                {value: 3650, text: '10 let'},
                {value: 5475, text: '15 let'},
                {value: 7300, text: '20 let'}
            ]
        },
        y: {
            show: false,
            lines: [
                {value: 75, position: 'start'},
                {value: 50, position: 'start'},
                {value: 25, position: 'start'},
            ]

        }
    },
    line: {
        step: {
            type: 'step-after'
        }
    },
    axis: {
        y: {
            max: 100,
            min: 0,
            padding: {top: 40, bottom: 0},
            label: {
                text: '% přeživších',
                position: 'outer-middle'
            }
        },
        x: {
            padding: {left: 0, rigth: 10},
            label: {
                text: 'dní',
                position: 'outer-center'
            },
            tick: {
                count: 100,
                format: function (x) {
                    return Math.round(x);
                },
                rotate: 75
            }
        }
    },
    size: {
        height: 720
    },
});

В результате чего эти точки (ошибка с красными областями):

enter image description here

И итоговый график выглядит так (ошибка с красной областью):

enter image description here

Как вы можете видеть, все точки вертикальной линии имеют данные 3 равных X и данные 3 Y всегда в одинаковом порядке (Y + 2, Y-2, Y), но ошибка есть только в одной части графика.

Если есть лучший способ создать эти вертикальные линии, я хотел бы знать, если нет, то у кого-то есть идея, почему эта ошибка появляется только в некоторых местах, а не везде? И как это исправить?

1 Ответ

0 голосов
/ 12 июля 2018

Библиотека, вероятно, повторно сортирует точки по их координате X, используя какой-то нестабильный алгоритм сортировки. Попробуйте: 

array_push($series[$id]['Y'], $maxY + 2);
array_push($series[$id]['X'], $d['time'] - 0.002);
array_push($series[$id]['Y'], $maxY - 2);
array_push($series[$id]['X'], $d['time'] - 0.001);

или другое подходящее небольшое смещение.

...