Jquery Flot Chart 逆时间序列选项

Question

有人知道如何以逆时间顺序使用 Flot 时间序列，首先显示最新日期吗？我一直想搜索一个选项，但在 API 中找不到。这是我的代码

var plot = $.plot("#placeholder1", [data], {
        series: {
                lines: { 
                    show: true, 
                    fill: 0.1
                },
                points: { show: true, 
                    fill: 0.05 }
        },
        xaxis: 
        {    
            mode: "time",
            minTickSize: [1, "day"],
            ticks:7 
        },
        grid: {             
            backgroundColor: { colors: [ "#fff", "#fff" ] },
            borderColor: "#ccc",
            borderWidth: {
                top: 1,
                right: 1,
                bottom: 1,
                left: 1
            },
            hoverable: true,
            clickable: true,
            markings: weekendAreas
        },
        legend: {
            labelBoxBorderColor: "#fff",
            position: "ne",
            margin: [0, 0]              
        }
    });

Answer 1

您可以使用xaxis transform function来做到这一点:

    xaxis: {    
        mode: "time",
        minTickSize: [1, "day"],
        ticks: 7,
        transform: function (v) { return -v; }, // run it backwards
        inverseTransform: function (v) { return -v; }
    },

这是一个fiddle .

运行代码:

var data = [
    [1384436902000, Math.random() * 100],
    [1384523302000, Math.random() * 100],
    [1384609702000, Math.random() * 100],
    [1384696102000, Math.random() * 100],
    [1384782502000, Math.random() * 100],
    [1384868902000, Math.random() * 100],
    [1384955302000, Math.random() * 100]
    ];


var plot = $.plot("#placeholder1", [data], {
        series: {
                lines: { 
                    show: true, 
                    fill: 0.1
                },
                points: { show: true, 
                    fill: 0.05 }
        },
        xaxis: 
        {    
            mode: "time",
            minTickSize: [1, "day"],
            ticks: 7,
            transform: function (v) { return -v; },
            inverseTransform: function (v) { return -v; }
        },
        grid: {             
            backgroundColor: { colors: [ "#fff", "#fff" ] },
            borderColor: "#ccc",
            borderWidth: {
                top: 1,
                right: 1,
                bottom: 1,
                left: 1
            },
            hoverable: true,
            clickable: true
        },
        legend: {
            labelBoxBorderColor: "#fff",
            position: "ne",
            margin: [0, 0]              
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://www.flotcharts.org/flot/jquery.flot.js"></script>
<script src="https://www.flotcharts.org/flot/jquery.flot.time.js"></script>
<div id="placeholder1" style="width:600px; height:300px"></div>