为什么 dygraphs 上的 showRoller 因 rollPeriod > 1 而失败

Question

有人问过这个问题 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 的图表

这是滚动周期 = 2

请注意，滚动周期 = 2 的图表上的点仍然有效。我可以将鼠标悬停在右上角并查看数据。但是线条没有画出来。这是什么原因造成的？

Answer 1

对于遇到此问题的任何其他人，我已经询问过可能导致此问题的原因是什么，以便我知道要寻找什么。我找到了。我使用 .toFixed(2) 将我的精度转换为 2 位小数。这会将数据转换回字符串。因此，如果您遇到此问题，请检查您的数据格式。令人困惑的原因是该图可以使用以字符串形式显示的数字绘制。但是当数据是字符串时，它无法进行计算滚动平均值所需的数学运算。

希望这对其他人有帮助！

为什么 dygraphs 上的 showRoller 因 rollPeriod > 1 而失败

Why does showRoller on dygraphs fail with rollPeriod > 1

dygraphs