首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >从时间戳中按天/周/月绘制线图

从时间戳中按天/周/月绘制线图
EN

Stack Overflow用户
提问于 2017-11-28 06:39:57
回答 1查看 2.8K关注 0票数 0

我想分析我的网站访问日志。该网站存储一个moment.js时间数组,每次在该网站上进行新的访问时,它将一个moment.js时间推送到该数组中。

从这个输入中,我想绘制线状图来显示number of visits day by dayweek by weekmonth by month。在每天显示访问次数的这个例子中,我必须自己准备数据(x轴和y轴):

代码语言:javascript
代码运行次数:0
运行
复制
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:这是chart.js的一个例子

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-11-30 11:43:14

Highstock提供了您需要的dataGroupig功能。

现场演示: http://jsfiddle.net/kkulig/avd0gqgr/

我强制数据分组,并覆盖它的单位按一下按钮。

代码语言:javascript
代码运行次数:0
运行
复制
//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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47525393

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档