javascript — C3 chart Error / bug — пошаговый линейный график
Я создаю график, где в одной ситуации линия опускается на некоторый уровень%, а во второй ситуации она должна создать вертикальную линию и продолжить на том же уровне, что и до этой точки слева
Поскольку это тип «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
},
});Решение
Библиотека, вероятно, пересортирует точки по их координате 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);
или какое-то другое подходящее небольшое смещение.
Другие решения
Других решений пока нет …