C3图表错误/错误-后续折线图

Question

我正在创建一个图形，在一种情况下，线下降一定百分比，而在第二种情况下，它应该创建垂直线，并继续从左到现在的水平

因为它是“后继”类型，所以逻辑应该很简单=>继续在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
    },
});

导致这些问题（红色区域标记错误）：

最终图形如下（红色区域标记错误）：

您可以看到所有垂直线点始终具有3个相等的X数据和3个Y数据，并且它们的顺序始终相同（Y + 2，Y-2，Y），但误差仅在图形的一部分中。

---

如果有更好的方法来创建这些垂直线，我想知道，如果没有，那么任何人都知道为什么此错误仅在某些地方而不是在所有地方出现？以及如何解决？

Answer 1

该库可能会使用某种不稳定的排序算法，通过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);

或其他一些适当的小偏移量。