Question

我正在使用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

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

由于

Answer 1

Dygraphs的数据格式列于http://dygraphs.com/data.html。日期需要转换为YYYY / MM / DD。有一种方法可以做到这一点，这似乎比现在更令人生畏，但会帮助你。有关详细信息，请参阅http://blog.dygraphs.com/2012/04/how-to-download-and-parse-data-for.html。

Answer 2

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

e.g。获取PHP以聚合值，然后将其传递给DyGraphs。

然而，我嘲笑你了：

这假设您只有一个数据系列，并且没有空/ 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

编辑：为了清晰起见修改了评论，为说明添加了上下文

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

2 个答案: