非線形x軸（対数スケール）でグラフを描く方法は？ - チャート、ドロー、フロート、リニア

次のようなクリティカルパワーチャートを作成しようとしています。

私が得るデータは線形です。 1から18000までの永久に1つの値。 非線形X軸を描画するために、どのようにフロートを教えるのか見当がつきません。 カスタムティックを設定しようとしましたが、これはラインではなくラベルにのみ影響があるようです。

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

回答：

あなたはそれを達成することができます 対数目盛）2つのステップで：

1. を使用してx軸の値を変換します Math.log 関数（ +1 ゼロの対数は-infinityであるため）。
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/