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] 
    ]; 

（我敢肯定，我已經試過這一點。）

Answer 1

您需要修改chartData陣列的格式以符合flot預計的data format。而不是定義多個數據集作爲一個系列（d1，d2，& d3爲d4），每個數據集是它自己的系列：

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

This JSFiddle有圖表的工作示例。如果要使線條顏色d1，d2和d3匹配，可以在新的chartData對象中指定該顏色。

Answer 2

你d4陣列內對於Flot，chartData不是正確的數據集。你應該直接在chartData插入d1，d2和d3：

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

一個完整的工作示例，請參見本fiddle。