为什么dygraphs上的showRoller会因rollPeriod＆gt;而失败？ 1

时间：2016-11-02 02:19:35

标签： dygraphs

这个问题被问到here但从未回答。当我将showRoller：true添加到我的代码然后将其设置为大于1的任何值时，图形将消失，并且只绘制左边缘的第一个点。

这是我的代码：

        g[gnum] = new Dygraph(document.getElementById(gdiv), mylines, {
            rollPeriod: 1,
            showRoller: true,
            labels: mylabels,
            drawXAxis: true,
            drawYAxis: true,
            drawXGrid: true,
            drawYGrid: true,
            valueRange: myrange,
            ylabel: ylabel[gnum],
            fillGraph: false,
            labelsShowZeroValues: true,
            highlightCircleSize: 0,
            strokeWidth: 0.4,
            gridLineColor: '#dedede',
            axisLabelColor: '#999999',
            colors: colors,
            rightGap: 15,
            highlightSeriesBackgroundAlpha: .6,
            highlightSeriesOpts: {
                strokeWidth: 0.5,
                strokeBorderWidth: 1,
                strokeBorderColor: "#6699ff",
                highlightCircleSize: 4
            },
            labelsDivWidth: 300,
            labelsDivStyles: {
                'text-align': 'right'
            },
            xAxisLabelWidth: 70,
            axisLabelFontSize: 13,
            axes: {
                x: {
                    pixelsPerLabel:80,
                    valueFormatter: function(ms) {
                        return ' ' + new Date(ms).strftime('%m/%d/%Y %T') + ' ';
                    },
                    axisLabelFormatter: function(d, gran) {
                        return Dygraph.zeropad(d.strftime('%m/%d/%Y'));
                    }
                },
                y: {
                    valueFormatter: function(y) {
                        //if (!y) return ' null ';
                        return ' ' + y + ' ' + yfmt[gnum] + ' ';
                    }
                }
            },
            drawCallback: function(me, initial) {
                var xrange = me.xAxisRange();
                if ((xrange[0] == oldxrange[0] && xrange[1] == oldxrange[1]) || blockRedraw || initial) return;
                else {
                    blockRedraw = true;
                    for (var j = 1; j <= maxGraphs; j++)
                    {
                        if (gnum == j) continue;    // don't draw if this graph or if graph doesn't exist
                        else {
                            g[j].updateOptions({
                                dateWindow: xrange
                            });
                        }
                    }
                    blockRedraw = false;
                    oldxrange = xrange;
                }
            },
            underlayCallback: function(canvas, area, g) {
                // critical threshold lines
                var bottom_left = g.toDomCoords(new Date(first[gnum]), critical[gnum][0]);
                var top_right = g.toDomCoords(new Date(last[gnum]), critical[gnum][0]);
                var left = bottom_left[0];
                var bottom = bottom_left[1];
                var right = top_right[0];
                var top = top_right[1]+5;
                canvas.fillStyle = "rgba(250, 0, 0, 1)";
                canvas.fillRect(left, bottom, right-left, 1);

                bottom_left = g.toDomCoords(new Date(first[gnum]), critical[gnum][1]);
                top_right = g.toDomCoords(new Date(last[gnum]), critical[gnum][1]);
                left = bottom_left[0];
                bottom = bottom_left[1];
                right = top_right[0];
                top = top_right[1]+5;
                canvas.fillStyle = "rgba(250, 0, 0, 1)";
                canvas.fillRect(left, bottom, right-left, 1);

                // maintenance threshold lines
                bottom_left = g.toDomCoords(new Date(first[gnum]), maintenance[gnum][0]);
                top_right = g.toDomCoords(new Date(last[gnum]), maintenance[gnum][0]);
                left = bottom_left[0];
                bottom = bottom_left[1];
                right = top_right[0];
                top = top_right[1]+5;
                canvas.fillStyle = "rgba(255, 220, 0, 1)";
                canvas.fillRect(left, bottom, right-left, 1);

                bottom_left = g.toDomCoords(new Date(first[gnum]), maintenance[gnum][1]);
                top_right = g.toDomCoords(new Date(last[gnum]), maintenance[gnum][1]);
                left = bottom_left[0];
                bottom = bottom_left[1];
                right = top_right[0];
                top = top_right[1]+5;
                canvas.fillStyle = "rgba(255, 220, 0, 1)";
                canvas.fillRect(left, bottom, right-left, 1);
            }
        });

我认为它与我的其他参数有一些冲突？当我将dygraphs示例代码放入我的系统时，它工作正常。我的数据看起来像这样...... 

Tue Oct 04 2016 11:00:01 GMT-0700 (PDT),136.00,135.78,136.60,137.16,
Tue Oct 04 2016 17:00:01 GMT-0700 (PDT),135.89,135.89,136.56,137.19,
Tue Oct 04 2016 23:00:01 GMT-0700 (PDT),135.93,136.04,136.45,137.23,
Wed Oct 05 2016 05:00:01 GMT-0700 (PDT),135.96,136.00,136.45,137.08,
Wed Oct 05 2016 11:00:01 GMT-0700 (PDT),136.00,135.96,136.49,137.16,
Wed Oct 05 2016 17:00:01 GMT-0700 (PDT),135.96,135.96,136.52,137.12,
Wed Oct 05 2016 23:00:01 GMT-0700 (PDT),135.96,135.89,136.56,137.08,
Thu Oct 06 2016 05:00:01 GMT-0700 (PDT),136.00,135.93,136.56,137.08,
Thu Oct 06 2016 11:00:01 GMT-0700 (PDT),136.00,135.93,136.56,137.08,
Thu Oct 06 2016 11:00:07 GMT-0700 (PDT),135.81,135.78,136.45,136.90,
Thu Oct 06 2016 17:00:01 GMT-0700 (PDT),136.00,135.89,136.60,137.12,
Thu Oct 06 2016 23:00:01 GMT-0700 (PDT),136.07,135.89,136.60,137.05,
Fri Oct 07 2016 05:00:01 GMT-0700 (PDT),136.04,135.89,136.60,137.01,
Fri Oct 07 2016 11:00:01 GMT-0700 (PDT),135.96,135.89,136.52,137.19,

一个注意事项：我的数据存在很大差距（大约10天）？那有关系吗？我认为无论日期是什么，dygraphs都会计算出一个滞后的滚动平均值。

这是滚动周期= 1的图表 enter image description here

这里滚动周期= 2 enter image description here

请注意，滚动周期= 2时，图形上的点仍处于活动状态。我可以将鼠标悬停在右上方并查看数据。但是没有绘制线条。是什么导致这种情况？

1 个答案:

答案 0 :(得分：0)

对于有这个问题的其他人，我曾经问过可能会导致什么样的事情，所以我会知道该寻找什么。我找到了。我用.toFixed（2）将我的精度转换为2位小数。这会将数据转换回字符串。因此，如果您遇到此问题，请检查您的数据格式。它令人困惑的原因是图形可以用呈现为字符串的数字绘制。但是当数据是字符串时，它无法进行计算滚动平均值所需的数学计算。

希望这有助于他人！

相关问题
最新问题