Question

我想制作一个图表，显示4个月间隔（3个周期/年）的数据。我希望x轴标签显示年份和时期，如下图所示：

http://i.stack.imgur.com/eerSy.png

到目前为止我做了什么：

    var data = [[1262278800000,87.5],[1293814800000,750],[1325350800000,100],[1356973200000,25],[1371229200000,87.5],[1388422800000,0],[1388509200000,375],[1402765200000,100],[1419958800000,1000]];
    var tahunsekarang=new Date(2015, 12, 31).getTime();    

    $.plot("#chartTabamaProduktifitas", [data], {
        xaxis: { mode: "time",tickSize: [4, "month"] ,  timeformat: "%Y",panRange: [1262217600000, tahunsekarang]},
        yaxis: {panRange: [0, 1500] },
        pan: { interactive: true},
        series: {lines: {show: true},points: {show: true}},
    });

但是因为我做了pan: { interactive: true}所以当我拖动图表时，滴答线总是改变值，它使得图表线不适合刻度线

Answer 1

1）如果您想在拖动图表时使用固定的刻度线，则必须提供固定的ticks数组，而不是tickSize选项。

2）要给出三个月的罗马数字，您可以使用tickFormatter函数代替timeformat选项。

新options对象：

xaxis: {
    mode: "time",
    ticks: ticks,
    tickFormatter: function (val, axis) {
        var d = new Date(val);
        var trimester = '';
        for (var i = 1; i <= (1 + d.getMonth() / 4); i++){
            trimester += "I";
        };
        return trimester + "<br>" + d.getFullYear();
    },
    panRange: [1262217600000, tahunsekarang]
},

有关工作示例，请参阅下面的代码段（或此fiddle）：

var data = [
    [1262278800000, 87.5],
    [1293814800000, 750],
    [1325350800000, 100],
    [1356973200000, 25],
    [1371229200000, 87.5],
    [1388422800000, 0],
    [1388509200000, 375],
    [1402765200000, 100],
    [1419958800000, 1000]
];

var ticks = [
    new Date(2010, 0, 1).valueOf(),
    new Date(2010, 4, 1).valueOf(),
    new Date(2010, 8, 1).valueOf(),
    new Date(2011, 0, 1).valueOf(),
    new Date(2011, 4, 1).valueOf(),
    new Date(2011, 8, 1).valueOf(),
    new Date(2012, 0, 1).valueOf(),
    new Date(2012, 4, 1).valueOf(),
    new Date(2012, 8, 1).valueOf(),
    new Date(2013, 0, 1).valueOf(),
    new Date(2013, 4, 1).valueOf(),
    new Date(2013, 8, 1).valueOf(),
    new Date(2014, 0, 1).valueOf(),
    new Date(2014, 4, 1).valueOf(),
    new Date(2014, 8, 1).valueOf(),
    new Date(2015, 0, 1).valueOf(),
    new Date(2015, 4, 1).valueOf(),
    new Date(2015, 8, 1).valueOf(),
];

var tahunsekarang = new Date(2015, 12, 31).getTime();

$.plot("#chartTabamaProduktifitas", [data], {
    xaxis: {
        mode: "time",
        //tickSize: [4, "month"],
        ticks: ticks,
        //timeformat: "%Y",
        tickFormatter: function (val, axis) {
            var d = new Date(val);
            var trimester = '';
            for (var i = 1; i <= (1 + d.getMonth() / 4); i++){
                trimester += "I";
            };
            return trimester + "<br>" + d.getFullYear();
        },
        panRange: [1262217600000, tahunsekarang]
    },
    yaxis: {
        panRange: [0, 1500]
    },
    pan: {
        interactive: true
    },
    series: {
        lines: {
            show: true
        },
        points: {
            show: true
        }
    },
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.navigate.min.js"></script>

<div style="height: 400px; width: 600px;" id="chartTabamaProduktifitas"></div>

制作特定时间段X轴Flot Jquery

1 个答案: