Question

我正试图绘制一个像这样的关键力量图表：

我得到的数据是线性的。从1到18000之前的一个值。我不知道怎么教flot画一个非线性的x轴。我试图设置自定义刻度，但这似乎只对标签产生影响，而不是线。

x轴刻度将始终相同，不需要计算：

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

包含大量数据的游乐场：https://jsfiddle.net/ogeo2ygx/6/

代码：

class Morse:NSObject, AVAudioPlayerDelegate {
    private var message = ""
    private var dotSound:AVAudioPlayer!
    private var dashSound:AVAudioPlayer!
    private let dash = Character("-")
    private let dot = Character(".")
    private var index:String.Index!

    init(message:String) {
        super.init()
        do {
            if let url = Bundle.main.url(forResource:"beep_short", withExtension:"mp3") {
                self.dotSound = try AVAudioPlayer(contentsOf:url)
                self.dotSound.delegate = self
                self.dotSound.prepareToPlay()
            }
        } catch {
            NSLog("Error loading dot audio!")
        }
        do {
            if let url = Bundle.main.url(forResource:"beep_long", withExtension:"mp3") {
                self.dashSound = try AVAudioPlayer(contentsOf:url)
                self.dashSound.delegate = self
                self.dashSound.prepareToPlay()
            }
        } catch {
            NSLog("Error loading dash audio!")
        }
        self.message = message
        self.index = message.startIndex
    }

    func playCharacter() {
        let character = message.characters[index]
        NSLog("Character: \(character)")
        if character == dash {
            dashSound.play()
        } else if character == dot {
            dotSound.play()
        }
    }

    func audioPlayerDidFinishPlaying(_ player: AVAudioPlayer, successfully flag: Bool) {
        NSLog("Finished playing")
        if index != message.endIndex {
            self.index = message.index(after:index)
            playCharacter()
        }
    }
}

let m = Morse(message:"...---")
m.playCharacter()

PlaygroundPage.current.needsIndefiniteExecution = true

Answer 1

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

使用Math.log函数（使用+1转换x轴值，因为零的对数是-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; }
}],

更新了小提琴：https://jsfiddle.net/ogeo2ygx/8/

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

1 个答案: