如何绘制具有非线性 x 轴（对数刻度）的图表？

Question

我正在尝试绘制这样的临界功率图：

我得到的数据是线性的。每秒一个值，从 1 到 18000。我不知道如何教 flot 绘制非线性 x 轴。我尝试设置自定义刻度，但这似乎只对标签产生影响，而不是线条。

x 轴刻度始终相同，无需计算：

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

Playground 包含大量数据：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
        }
    });

Answer 1

您可以通过两个步骤实现（称为 logarithmic scale）：

使用 Math.log 函数转换 x 轴值（使用 +1 因为零的对数是 -infinity）。
用您的报价定义自定义 ticks 数组。

有关详细信息，请参阅 documentation。相关代码：

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

已更新 fiddle：https://jsfiddle.net/ogeo2ygx/8/

如何绘制具有非线性 x 轴（对数刻度）的图表？

How to draw a chart with nonlinear x-axis (logarithmic scale)?

charts

draw

flot