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以隐藏一个轴.max2014年数据的设置很重要,否则数据集将缩放以填充整个图表:

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

JS小提琴在这里.

完整代码如下:

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();
}