1

我正在使用 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 文件的格式。

谢谢

4

2 回答 2

0

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

于 2013-02-24T16:28:11.607 回答
0

我不确定您的用例是什么，但如果是我，我会在将数据传递给 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

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

于 2014-01-13T12:26:09.573 回答