Як намалювати діаграму з нелінійною осі x (логарифмічна шкала)? - діаграми, рисунки, флот, лінійні

Я намагаюся намалювати критичну діаграму потужності так:

Отримані дані є лінійними. Одне значення назавжди друге від 1 до 18000. Я не маю поняття, як навчити флота малювати нелінійний осі. Я намагався встановити спеціальні галочки, але це, здається, просто впливає на мітки, а не на лінію.

Кліщі по осі x завжди будуть однаковими, і не потрібно їх обчислювати:

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

Ігровий майданчик, включаючи тонни даних: https://jsfiddle.net/ogeo2ygx/6/

Код:

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

Відповіді:

Ви можете досягти цього (що називається логарифмічна шкала) з двома кроками:

1. Перетворіть значення осі x за допомогою Math.log функція (з a +1 тому що логарифм нуля - нескінченність).
2. Визначте звичай ticks масив вашими кліщами.

Див документація для отримання додаткової інформації. Відповідний код:

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

Оновлена ​​скрипка: https://jsfiddle.net/ogeo2ygx/8/