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

2019-10-26 09:45:44 阅读：265 来源： 互联网

从我发现的here开始,我能够轻松地生成水平时间线图表.我现在想做的是添加一个额外的线图(或多个add’l图)以覆盖该时间线.时间轴将显示在某个日期范围内投放的促销(广告),例如,我需要在整个日期范围内显示SALES的折线图.

如果执行此操作,则会成功在时间轴上绘制促销：

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

(我很确定我也尝试过.)

解决方法:

您需要修改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对象中指定线条颜色.

标签：flot,javascript,jquery
来源： https://codeday.me/bug/20191026/1935769.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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