【问题标题】:Chart.js - consolidating days to month totals along the x (time) axis?Chart.js - 沿 x(时间)轴合并天数到月数?
【发布时间】:2019-03-27 20:55:09
【问题描述】:

我将两个每日统计数据集输入到我的图表中。如您所见,每个元素代表特定日期的值。

"data":[[{"y":"1",  "x":"2018-04-01T04:00:00Z"},
         {"y":"14", "x":"2018-04-02T04:00:00Z"},
         {"y":"5",  "x":"2018-04-03T04:00:00Z"},
         {"y":"7",  "x":"2018-04-04T04:00:00Z"},
         ...

x轴定义如下:

xAxes: [{
         type: 'time',
         distribution: 'series',
         time: {
                unit: 'month'
               }
        }]

我(天真地?)认为图表会将日期值汇总(汇总)到适当的月份存储桶中,但这不是我得到的。相反,我在 x 轴上获得了每月刻度线,但数据点以每日精度绘制在图表中。 (见截图。)

在我继续重新处理我的数据集以手动将日期汇总到各自的月份存储桶中之前,我想知道图表实际上是否可以为我执行此操作,但我只是设置错误,或者是否实际上,在将数据集提供给图表进行绘图之前,我确实需要自己处理此摘要。

感谢您的建议!

【问题讨论】:

    标签: javascript chart.js


    【解决方案1】:

    我通过在底层数据集的组装过程中自己进行汇总解决了这个问题,然后将其提供给图表。

    var dayDate = new Date($scope.insights.locationMetrics[lm].metricValues[metric].dimensionalValues[dim].timeDimension.timeRange.startTime);
    var monthDate = dayDate.getFullYear() + "-" + (dayDate.getMonth() + 1);
    
    var hitCount = {
        y: $scope.safeNumber($scope.insights.locationMetrics[lm].metricValues[metric].dimensionalValues[dim].value),
        x: monthDate
    }
    var alreadyRecorded = hits[labelIdx].findIndex(obj => obj.x == hitCount.x)
    
    if (alreadyRecorded > -1) {
        hits[labelIdx][alreadyRecorded].y += Number(hitCount.y);
    }
    else {
        hits[labelIdx].push(hitCount);
    }
    
    1. 从基础数据源中提取日期
    2. 从日期中提取 yyyy-mm
    3. 创建 hitCount 对象
    4. 检查 hitCount 对象是否已经在数组中
    5. 如果对象已经在数组中,则增加数组中的 hitCount (y)。
    6. 否则,将对象推入数组。

    【讨论】:

    • 顺便说一句 - 我随后将此“时间”图表转换为“折线”图表。为 x 轴显式格式化月份标签需要做一些额外的工作,但好处是更好,更明确地控制 x 轴。
    猜你喜欢
    • 1970-01-01
    • 2022-07-08
    • 1970-01-01
    • 2016-07-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多