Flot - 将水平时间轴与“标准”线条结合起来

Question

根据我在这里找到的内容，我能够很容易地制作一个水平时间线图。现在我想添加一个额外的折线图（或多个折线图），以覆盖该时间线。时间线将显示在日期范围内运行的促销活动，我需要显示整个日期范围内的销售额折线图，例如。

如果我这样做，我可以成功地在时间轴上绘制出促销活动：

    var d1 = [[(new Date("2016-12-01")).getTime(), 1], [(new Date("2016-12-10")).getTime(), 1]];
    var d2 = [[(new Date("2016-12-12")).getTime(), 2], [(new Date("2016-12-20")).getTime(), 2]];
    var d3 = [[(new Date("2016-12-21")).getTime(), 3], [(new Date("2016-12-31")).getTime(), 3]];
var plot = $.plot($chartDiv, [d1,d2,d3], {
        xaxis:{mode:"time", timeformat:"%Y-%m-%d"},
        yaxis:{ticks:[[1, "Promo 1"],[2, "Promo 2"],[3, "Promo 3"]]}
    });

这将产生类似于这样的内容：http://i.imgur.com/m0bjegQ.png 我已经尝试了许多种添加销售数据和配置选项的方法，但都没有成功。以下是我最接近成功的方式：

    var d1 = [[(new Date("2016-12-01")).getTime(), 1], [(new Date("2016-12-10")).getTime(), 1]];
    var d2 = [[(new Date("2016-12-12")).getTime(), 2], [(new Date("2016-12-18")).getTime(), 2]];
    var d3 = [[(new Date("2016-12-16")).getTime(), 3], [(new Date("2016-12-24")).getTime(), 3]];        
    var d4 = [d1,d2,d3];
    var d5 = [
        [(new Date("2016-12-01")).getTime(),201000],
        [(new Date("2016-12-02")).getTime(),201000],
        [(new Date("2016-12-04")).getTime(),356897],
        [(new Date("2016-12-05")).getTime(),201000],
        [(new Date("2016-12-06")).getTime(),545122],
        [(new Date("2016-12-07")).getTime(),100324],
        [(new Date("2016-12-08")).getTime(),348645],
        [(new Date("2016-12-09")).getTime(),201000],
        [(new Date("2016-12-10")).getTime(),729646],
        [(new Date("2016-12-11")).getTime(),206456],
        [(new Date("2016-12-12")).getTime(),357713],
        [(new Date("2016-12-15")).getTime(),280647],
        [(new Date("2016-12-17")).getTime(),398654],
        [(new Date("2016-12-18")).getTime(),412054],
        [(new Date("2016-12-19")).getTime(),167545],
        [(new Date("2016-12-20")).getTime(),512345],
        [(new Date("2016-12-21")).getTime(),612454],
        [(new Date("2016-12-22")).getTime(),760214],
        [(new Date("2016-12-23")).getTime(),715546],
        [(new Date("2016-12-24")).getTime(),650654],
        [(new Date("2016-12-25")).getTime(),712547],
        [(new Date("2016-12-26")).getTime(),780242],
        [(new Date("2016-12-27")).getTime(),725454],
        [(new Date("2016-12-28")).getTime(),799142]
    ]
    var chartData = [
        {
            data:d4,
            yaxis:1
        },
        {   
            data:d5,
            yaxis:2
        }
    ];     

    // plot it
    var plot = $.plot($chartDiv, chartData, {
        xaxis:{mode:"time", timeformat:"%Y-%m-%d"},
        yaxes: [
        {
            position:"left",
            ticks:[[1,"Promo 1"],[2,"Promo 2"],[3,"Promo 3"]],
            max: 4
        },
        {
            position: "right",
            max: 800000,
        }],
        grid: {
            mouseActiveRadius: 50,
            hoverable: true,
            clickable: true
        }
    });

这是结果： http://i.imgur.com/ChcvSbn.png 我无法使促销信息显示出来。这是因为两个数据集的配置不同吗？如果是，我该如何正确地进行配置？我需要“填写”促销日期以使其看起来像这样吗：

var d1 = [
        [(new Date("2016-12-01")).getTime(), 1], 
        [(new Date("2016-12-02")).getTime(), 1], 
        [(new Date("2016-12-03")).getTime(), 1], 
        [(new Date("2016-12-04")).getTime(), 1], 
        [(new Date("2016-12-05")).getTime(), 1], 
        [(new Date("2016-12-06")).getTime(), 1], 
        [(new Date("2016-12-07")).getTime(), 1], 
        [(new Date("2016-12-08")).getTime(), 1], 
        [(new Date("2016-12-09")).getTime(), 1], 
        [(new Date("2016-12-10")).getTime(), 1]
    ];

（我相当确定我也尝试过那个方法。）

- dinologic

---

时间轴图表： http://stackoverflow.com/questions/10987870/display-timeline-linear-data-in-flot多坐标轴： http://www.jqueryflottutorial.com/how-to-make-jquery-flot-multiple-axes-chart.html - dinologic

我在问题中添加了第一个链接。 - Raidri

Answer 1

chartData 内部的 d4 数组不是 Flot 的正确数据集。你应该直接将 d1、d2 和 d3 插入到你的 chartData 中：

var chartData = [
    {
        data:d1,
        yaxis:1
    },
    {
        data:d2,
        yaxis:1
    },
    {
        data:d3,
        yaxis:1
    },
    {   
        data:d5,
        yaxis:2
    }
];

查看这个示例，了解完整的工作范例。

- Raidri

Answer 2

你需要修改你的chartData数组的格式，以符合flot所期望的数据格式。每个数据集不再像一个系列（d1、d2和d3作为d4）一样定义为一个系列，而是每个数据集都是它自己的系列：

var chartData = [
    {
        data:d1,
        yaxis:1
    },
    {
        data:d2,
        yaxis:1
    },
    {
        data:d3,
        yaxis:1
    },
    {   
        data:d5,
        yaxis:2
    }
];     

这个JSFiddle有一个可以工作的图表例子。如果你想让d1，d2和d3的线条颜色保持一致，你可以在新的chartData对象中指定。

- mechenbier

---

嗯，只有9秒的差距 :-) - Raidri

@Raidri 哈哈没错 - 我在写最后一句话的时候看到了“另一个用户已经提供了答案”的框，我想你比我更快。 - mechenbier

现在我看到了，这显然。谢谢。 - dinologic