javascript - 包含两组日期的折线图

我正在使用Morris插件绘制折线图，​​但在同一张图中组合两组数据时遇到困难。这是我的小提琴。它显示了我的第一张图。

function formatDate(myDate){
    var m_names = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");

    var d = new Date(myDate);

    var curr_month = d.getMonth();
    //var curr_year = d.getFullYear();
    //return (m_names[curr_month] + "-" + curr_year);
    return (m_names[curr_month]);
}

new Morris.Line({
    element: 'financial-year-sales-graph',
    data: [
        { month: '2013-07', sales: 52325 },
        { month: '2013-08', sales: 65432 },
        { month: '2013-09', sales: 52125 },
        { month: '2013-10', sales: 23265 },
        { month: '2013-11', sales: 25125 },
        { month: '2013-12', sales: 63256 },
        { month: '2014-01', sales: 52365 },
        { month: '2014-02', sales: 65954 },
        { month: '2014-03', sales: 55255 },
        { month: '2014-04', sales: 66236 },
        { month: '2014-05', sales: 52369 },
        { month: '2014-06', sales: 85214 }
    ],
    // The name of the data record attribute that contains x-values.
    xkey: 'month',
    // A list of names of data record attributes that contain y-values.
    ykeys: ['sales'],
    // Labels for the ykeys -- will be displayed when you hover over the
    // chart.
    labels: ['Sales'],
    xLabelFormat: function(str){
        return formatDate(str);
    },
    preUnits: '$'
});

http://jsfiddle.net/pz6L12wb/

我正在尝试向此图添加另一条线。我不想有这样的两行，即http://weblessons.info/2014/06/15/creating-line-chart-using-morris-js-tutorial/，它在同一时间段内有两组数据。相反，我想要两个日期，即第一组2013年7月至2014年6月，第二组2014年7月至2013年6月，这显示了这两年的比较。

有可能实现吗？谢谢

最佳答案

您需要将其他数据添加到数据系列中，然后调整返回的hoverLabel，以便它正确显示该月两个系列的值。

像这样的例子：

function formatDate(myDate){
    var m_names = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");

    var d = new Date(myDate);

    var curr_month = d.getMonth();
    //var curr_year = d.getFullYear();
    //return (m_names[curr_month] + "-" + curr_year);
    return (m_names[curr_month]);
}

function formatHoverLabel(row, preUnit) {
    var m_long_names = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
    var d = new Date(row.month);
    var curr_month = d.getMonth();

    var salesText = "Sales for "+m_long_names[curr_month];
    a=1;
    for (i in yearsInGraph) {
        salesText = salesText + "<br/>"+yearsInGraph[i]+": "+preUnit+row['sales'+(a++)];
    }
    return salesText;
}

yearsInGraph = [2012, 2013, 2014];

new Morris.Line({
    element: 'financial-year-sales-graph',
    data: [
        { month: '2013-07', sales1: 44333, sales2: 52325, sales3: 42325 },
        { month: '2013-08', sales1: 64333, sales2: 65432, sales3: 62325 },
        { month: '2013-09', sales1: 34333, sales2: 52125, sales3: 53025 },
        { month: '2013-10', sales1: 14333, sales2: 23265, sales3: 25325 },
        { month: '2013-11', sales1: 24333, sales2: 25125, sales3: 30324 },
        { month: '2013-12', sales1: 74333, sales2: 63256, sales3: 60325 },
        { month: '2013-01', sales1: 38333, sales2: 52365, sales3: 55325 },
        { month: '2013-02', sales1: 64333, sales2: 65954, sales3: 66325 },
        { month: '2013-03', sales1: 60333, sales2: 55255, sales3: 50325 },
        { month: '2013-04', sales1: 59333, sales2: 66236, sales3: 66025 },
        { month: '2013-05', sales1: 47333, sales2: 52369, sales3: 48335 },
        { month: '2013-06', sales1: 83333, sales2: 85214, sales3: 90666 }
    ],
    // The name of the data record attribute that contains x-values.
    xkey: 'month',
    // A list of names of data record attributes that contain y-values.
    ykeys: ['sales1', 'sales2', 'sales3'],
    // Labels for the ykeys -- will be displayed when you hover over the
    // chart.
    labels: yearsInGraph,
    hoverCallback: function (index, options, content, row) {
         return formatHoverLabel(row, options.preUnits);
    },
    xLabelFormat: function(str){
        return formatDate(str);
    },
    preUnits: '$'
});

产生如下的折线图：



JS Fiddle here