javascript - jquery Flot用DateTime填充两个数据集并做重叠效果

Question

我有一张图表(下图)，其中绿线表示 2014 年，紫线表示 2013 年。

var data1 = [
        [gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
        [gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 5]];    

    var data2 = [
        [gd(2014, 1, 1), 1], [gd(2014, 2, 1), 0], [gd(2014, 3, 1), 2], [gd(2014, 4, 1), 0],
        [gd(2014, 5, 1), 1], [gd(2014, 6, 1), 3], [gd(2014, 7, 1), 1], [gd(2014, 8, 1), 5],
        [gd(2014, 9, 1), 2], [gd(2014, 10, 1), 3], [gd(2014, 11, 1), 2], [gd(2014, 12, 1), 1]]; 

这是数据集，但看起来我将两个数据集都放在 2014 年，因为如果我将 2014 年放在一个数据集中，将 2013 年放在另一个数据集中，我会错过重叠效应，我需要该效应进行比较。

如果将 2013 年放在一个数据集中，将 2014 年放在另一个数据集中，就会发生这种情况(下图)

如何在一个数据集中使用 2013 年制作相同的图表，但具有这种重叠效果？

这也将修复我的hover 功能。

代码

var data1 = [
        [gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
        [gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 5]];    

    var data2 = [
        [gd(2014, 1, 1), 1], [gd(2014, 2, 1), 0], [gd(2014, 3, 1), 2], [gd(2014, 4, 1), 0],
        [gd(2014, 5, 1), 1], [gd(2014, 6, 1), 3], [gd(2014, 7, 1), 1], [gd(2014, 8, 1), 5],
        [gd(2014, 9, 1), 2], [gd(2014, 10, 1), 3], [gd(2014, 11, 1), 2], [gd(2014, 12, 1), 1]];

    $("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
        data1, data2
    ],
            {
                series: {
                    lines: {
                        show: false,
                        fill: true
                    },
                    splines: {
                        show: true,
                        tension: 0.4,
                        lineWidth: 1,
                        fill: 0.4
                    },
                    points: {
                        radius: 2,
                        show: true
                    },
                    shadowSize: 2
                },
                grid: {
                    hoverable: true,
                    clickable: true,
                    tickColor: "#d5d5d5",
                    borderWidth: 1,
                    color: '#d5d5d5'
                },
                colors: ["#1ab394", "#464f88"],
                xaxis: {
                    mode: "time",
                    tickSize: [1, "month"],
                    tickLength: null,
                    axisLabel: "Date",
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: 'Arial',
                    axisLabelPadding: 10,
                    color: "#838383",
                    timeformat: "%b/%y"
                },
                yaxis: {
                    ticks: 4
                }
            }
    );

function gd(year, month, day) {
    return new Date(year, month - 1, day).getTime();
}

Answer 1

你使用了多轴的概念，只是隐藏了第二个轴。

为此，您创建了两个数据集，每个数据集都有自己的轴:

var data2014 = {
    label: "2014",
    data: data1,
    xaxis: 1
};
var data2013 = {
    label: "2013",
    data: data2,
    xaxis: 2
};

然后在 axes 选项设置中，将 ticks 设置为 false 以隐藏一个轴。2014 年数据的 max 设置很重要，否则数据集将缩放以填满整个图表:

xaxes: [{
          mode: "time",
          tickSize: [1, "month"],
          tickLength: null,
          color: "#838383",
          timeformat: "%b",
          max: (new Date("2014/12/1")).getTime()
        },{
          ticks: false 
        }],

JS Fiddle here .

完整代码如下:

var data1 = [
        [gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
        [gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 5]];    

    var data2 = [
        [gd(2013, 1, 1), 1], [gd(2013, 2, 1), 0], [gd(2013, 3, 1), 2], [gd(2013, 4, 1), 0],
        [gd(2013, 5, 1), 1], [gd(2013, 6, 1), 3], [gd(2013, 7, 1), 1], [gd(2013, 8, 1), 5],
        [gd(2013, 9, 1), 2], [gd(2013, 10, 1), 3], [gd(2013, 11, 1), 2], [gd(2013, 12, 1), 1]];

var data2014 = {
    label: "2014",
    data: data1,
    xaxis: 1
};
var data2013 = {
    label: "2013",
    data: data2,
    xaxis: 2
};

    $("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
        data2014, data2013
    ],
            {
                series: {
                    lines: {
                        show: false,
                        fill: true
                    },
                    splines: {
                        show: true,
                        tension: 0.4,
                        lineWidth: 1,
                        fill: 0.4
                    },
                    points: {
                        radius: 2,
                        show: true
                    },
                    shadowSize: 2
                },
                grid: {
                    hoverable: true,
                    clickable: true,
                    tickColor: "#d5d5d5",
                    borderWidth: 1,
                    labelMargin: 17,
                    margin: {
                        top: 8,
                        bottom: 10,
                        left: 20
                    },
                    minBorderMargin: 25,
                    color: '#d5d5d5'
                },
                colors: ["#1ab394", "#464f88"],
                xaxes: [{
                    mode: "time",
                    tickSize: [1, "month"],
                    color: "#838383",
                    timeformat: "%b",
                    max: (new Date("2014/12/1")).getTime()
                },{
                    ticks: false,
                }],
                yaxis: {
                    ticks: 5
                },
                legend: {         
                    backgroundOpacity: 0.5,
                    noColumns: 0,
                    position: "ne",
                    color: "#838383",
                }
        }
    );

function gd(year, month, day) {
    return new Date(year, month - 1, day).getTime();
}