如何使用 dygraphs 库绘制聚合数据图表答案

【问题标题】：How do I chart aggregate data using the dygraphs library如何使用 dygraphs 库绘制聚合数据图表
【发布时间】：2012-11-30 00:05:23
【问题描述】：

我正在使用 dygraphs 库 (http://dygraphs.com)，我想知道是否有办法指定如何绘制 y 轴。

我的数据如下所示（我从 CSV 文件加载）：

日期、统计 20121029,13 20121030,14 20121031,1 20121101,0 20121102,7 20121103,0 20121104,7

这就是我的 JS 的样子：

<script type="text/javascript">
g3 = new Dygraph(
document.getElementById("divGraph2"),
"<?php echo $csvstats;?>",
{ interactionModel: {}, labels: [ " ", " "], strokeWidth: 3, showLabelsOnHighlight:false,axes: {x:{axisLabelFormatter: function(x){return "";}, valueFormatter: function(s) {return "";}}, y:{axisLabelFormatter: function(y){return "";}, valueFormatter: function(y) {return "";}}} });
</script>

目前，图表以 y 轴显示为每日数据。

我想在y轴上显示数据如下：

20121029 - 13 20121030 - 27 20121031 - 28 20121101 - 28 20121102 - 35 20121103 - 35 20121104 - 42

dygraphs 中是否有任何选项可以用来执行此操作？我无法更改输入 CSV 文件的格式。

谢谢

【问题讨论】：

标签： dygraphs

【解决方案1】：

Dygraphs 的数据格式位于http://dygraphs.com/data.html。日期需要转换为 YYYY/MM/DD。有一种方法可以做到这一点，这可能看起来比它更令人生畏，但会帮助你。请参阅http://blog.dygraphs.com/2012/04/how-to-download-and-parse-data-for.html 了解更多信息。

【讨论】：

【解决方案2】：

我不确定您的用例是什么，但如果是我，我会在将数据传递给 DyGraphs 之前以我需要的形式重新生成数据。

例如让 PHP 聚合这些值，然后将其传递给 DyGraphs。

但是，我为你模拟了这个：

这假设您只有一个数据系列，并且没有 null/NaN 值

g3 = new Dygraph(
    document.getElementById("divGraph2"),
    "2012-10-29,13 \n"+
    "2012-10-30,14 \n"+
    "2012-10-31,1 \n"+
    "2012-11-01,0 \n"+
    "2012-11-02,7 \n"+
    "2012-11-03,0 \n"+
    "2012-11-04,7 \n",
    { 
        interactionModel: {}, 
        labels: [ " ", " "], 
        strokeWidth: 3, 
        showLabelsOnHighlight:false,
        axes: {
            x:{
                axisLabelFormatter: function(x){return "";}, 
                valueFormatter: function(s) {return "";}
            }, 
            y:{
                axisLabelFormatter: function(y){return "";}, 
                valueFormatter: function(y) {return "";}
            }
        }
    }
);

data = g3.rawData_; //Object of arrays in the format of [timestamp, y-axis value]
var length = data.length;
var current;
var aggregate = 0;
for(var i = 0; i < length; i++) {
    current = data[i]; //Get current array 
    aggregate = aggregate + current[1]; //Aggregate y-axis value
    current[1] = aggregate; //Store updated value (this works because the variable "current" is a reference to the "data" object)
}

g3.updateOptions(data); //Reload data

编辑：为清楚起见修改了 cmets，为解释添加了上下文

【讨论】：