타임 스탬프에서 일/주/월별 라인 차트 그리기

Question

내 웹 사이트의 방문 기록을 분석하고 싶습니다. 웹 사이트는 moment.js 시간의 배열을 저장하며, 웹 사이트에 새로운 방문이있을 때마다 moment.js 시간을 배열에 푸시합니다.

해당 입력에서 number of visitsday by day, week by week 및 month by month을 표시하는 꺾은 선형 차트를 그립니다. 하루 방문의 날의 수를 보여주는 this example, 나는 나 자신에 의해 (x 축과 y 축으로) 데이터를 준비해야합니다 :

var enumerateDaysBetweenDates = function(startDate, endDate) { 
    var dates = {}; 
    var currDate = startDate.clone().startOf('day').add(-1,'days'); 
    var lastDate = endDate.clone().startOf('day'); 
    while(currDate.add(1, 'days').diff(lastDate) <= 0) { 
     var x = currDate.clone(); 
     dates[x.format('YYYY-MM-DD')] = { "numberOfVisits": 0 }; 
    } 
    return dates; 
}; 

var startDate = moment({ year : 2017, month : 10, day : 1 }); 
var endDate = moment({ year : 2017, month : 10, day : 30 }); 
var res = enumerateDaysBetweenDates(startDate, endDate) 
for (var i = 0; i < logs.length; i++) { 
    var date = moment.utc(logs[i]).format("YYYY-MM-DD"); 
    res[date].numberOfVisits++ 
} 

// change format: 
var r = []; 
for (var d in res) { 
    if (res.hasOwnProperty(d)) { 
     var a = d.split("-"); 
     var b = Date.UTC(a[0], a[1] - 1, a[2]); 
     r.push([b, res[d].numberOfVisits]) 
    } 
} 

는 몇 주 또는 몇 달 차트를 그리려면, 나는 다시해야 데이터를 준비하십시오. 차트를 자동으로 그릴 수있는 방법, 매개 변수 또는 라이브러리가 있는지 아는 사람 있습니까?

PS : 여기에 an example by chart.js

Answer 1

이 Highstock 당신이 찾고있는 것 같다 dataGroupig 기능을 제공합니다.

라이브 데모 :http://jsfiddle.net/kkulig/avd0gqgr/

나는 그룹화 된 데이터를 강제 버튼 클릭에 그 단위를 덮어.

//options 
    xAxis: { 
    ordinal: false 
    }, 

    plotOptions: { 
    series: { 
     dataGrouping: { 
     forced: true, 
     approximation: 'sum' 
     } 
    } 
    }, 
(...) 

// button 
$('#months').click(function() { 
    chart.update({ 
    plotOptions: { 
     series: { 
     dataGrouping: { 
      units: [ 
      [ 
       'month', [1] 
      ] 
      ] 
     } 
     } 
    } 
    }); 
}); 

---

API 참조 :https://api.highcharts.com/highstock/plotOptions.series.dataGrouping

문서 참조 :https://www.highcharts.com/docs/advanced-chart-features/data-grouping