Линейный график, содержащий два набора дат

Question

Я использую плагин 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 года по июнь 2014 года, второй набор - с июля 2014 года по июнь 2013 года, это показывает сравнение этих двух лет.

Можно ли достичь? Спасибо

Answer 1

Вам нужно добавить другие данные в ряд данных, а затем настроить 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