javascript - C3 图表 Error/bug - 步进折线图

Question

我正在创建一个图表，在一种情况下，线下降到某个百分比水平，在第二种情况下，它应该创建垂直线并继续在同一水平从左边来到这一点

因为它是“Step-after”类型，所以逻辑应该是直截了当的 => 在 X 上移动直到到达下一个点，然后从之前的 Y 更改为新的 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);

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