Come disegnare un grafico con asse x non lineare (scala logaritmica)? - grafici, disegnare, flottare, lineare

Sto cercando di disegnare un grafico di potenza critico come questo:

I dati che ottengo sono lineari. Un valore per sempre secondo da 1 a 18000. Non ho idea di come insegnare a flotare per disegnare un xaxis non lineare. Ho provato a impostare i tick personalizzati, ma questo sembra avere solo un impatto sulle etichette, non sulla linea.

Le zecche dell'asse x saranno sempre le stesse e non è necessario calcolare:

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

Parco giochi con tonnellate di dati: https://jsfiddle.net/ogeo2ygx/6/

Codice:

$.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
}
});

risposte:

È possibile ottenere ciò (che è chiamato scala logaritmica) con due passaggi:

1. Trasforma i valori dell'asse x usando il Math.log funzione (con a +1 perché il logaritmo di zero è -infinità).
2. Definire un'abitudine ticks array con i tuoi tick.

Vedere il documentazione per maggiori informazioni. Codice pertinente:

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; }
}],

Violino aggiornato: https://jsfiddle.net/ogeo2ygx/8/