Jak narysować wykres z nieliniową osią X (skala logarytmiczna)? - wykresy, rysowanie, flot, liniowy

Próbuję narysować Critical Power Chart w następujący sposób:

Dane, które otrzymuję, są liniowe. Jedna wartość to druga wartość od 1 do 18000. Nie mam pojęcia, jak nauczyć flot, aby narysować nieliniowe xaxis. Próbowałem ustawić niestandardowe znaczniki, ale wydaje się, że mają one wpływ na etykiety, a nie na linię.

Trzaski osi x będą zawsze takie same i nie trzeba ich obliczać:

[1s,5s,15s,30s,1m,2m,3m,5m,10m,20m30m,1h,2h,3h,5h]

Plac zabaw, w tym mnóstwo danych: https://jsfiddle.net/ogeo2ygx/6/

Kod:

$.plot($("#cpChart"), [{data: data,label: "Critical Power", labelBoxBorderColor: 0, color: "#cbcbcb",yaxis:1,lines: { show: true, fill: true } }], {
xaxes: [{
//here should be some Magic to Draw an nice Critical Power Chart
tickFormatter: (t, v) => {
return t + "s";
}
}],
yaxes: [{
alignTicksWithAxis: 1,
position: "left",
tickFormatter: (t, v) => {
return t.toFixed(0) + " Watt"
}
}],
legend: {
position: "sw",
labelBoxBorderColor: 0
},
colors: ["#1ab394"],
grid: {
color: "#999999",
clickable: true,
tickColor: "#D4D4D4",
borderWidth: 0,
hoverable: true
}
});

Odpowiedzi:

Możesz to osiągnąć (co nazywa się skala logarytmiczna) z dwoma krokami:

1. Przekształć wartości osi X za pomocą Math.log funkcja (z +1 ponieważ logarytm zerowy to -infinity).
2. Zdefiniuj niestandardowy ticks tablica z kleszczami.

Zobacz dokumentacja po więcej informacji. Odpowiedni kod:

xaxes: [{
ticks: [[1, "1s"],[5, "5s"], [15, "15s"],[30, "30s"],[60, "1m"],[120, "2m"],[180, "3m"], [300, "5m"], [600, "10m"], [1200, "20m"], [1800, "30m"],[3600, "1h"], [7200, "2h"], [10800, "3h"], [18000, "5h"]],
transform: (x) => { return Math.log(1 + x); },
inverseTransform: (x) => { return Math.exp(x) - 1; }
}],

Zaktualizowano skrzypce: https://jsfiddle.net/ogeo2ygx/8/