Dygraphs

Question

我有一个图表，我在其中使用底图在点之间绘制垂直线。我有一行代码限制这些垂直线不在活动 canvas 之外绘制。但是当我使用这个 underlayCallback 时，'points' 仍然绘制在 canvas 之外。如果我删除我的 underlayCallback，这些点将像人们预期的那样被限制在 canvas 内。这是它们的样子和我的代码。（抱歉，该站点太过安全，无法提供工作示例。）

g[i] = new Dygraph(thisdiv, mylines, {
            labels: graphlbls[i],
            ylabel: graphunits[i].capitalizeFirstLetter(),
            xlabel: '',
            xLabelHeight:15,
            yLabelWidth:15,
            rightGap: 5,
            labelsDivStyles: {
                'text-align': 'right',
                'background': 'none'
            },
            colors: ['#D48513','#1D6EB5'],
            title: graphtitles[i],
            titleHeight:23,
            drawPoints: true,
            showRoller: false,
            drawXGrid: false,
            drawYGrid: true,
            strokeWidth: 0,
            pointSize: 4,
            highlightCircleSize: 6,
            gridLineColor: "#ddd",
            axisLabelFontSize: 12,
            xAxisHeight: 20,
            valueRange: [minval, maxval],
            rangeSelectorHeight: 30,
            showRangeSelector: true,
            rangeSelectorPlotFillColor: '#ffffff',
            rangeSelectorPlotStrokeColor: '#ffffff',
            interactionModel: Dygraph.defaultInteractionModel,
            axes: {
                x: {
                    valueFormatter: function (ms) {
                        var d = new Date(ms);
                        var day = "0"+d.getDate();
                        var month = "0"+(d.getMonth()+1);
                        var year = d.getFullYear();
                        var hour = "0"+ d.getHours();
                        var min = "0"+d.getMinutes();
                        var p = "AM";
                        if (hour > 12) { p = "PM"; hour = hour - 12; }
                        if (df == 0) var dd = month.slice(-2)+"/"+day.slice(-2)+"/"+year;
                        if (df == 1) var dd = day.slice(-2)+"/"+month.slice(-2)+"/"+year;
                        if (tf == 0) var tt = hour.slice(-2)+":"+min.slice(-2)+" "+p+" ";
                        if (tf == 1) var tt = hour.slice(-2)+":"+min.slice(-2)+" ";
                        return dd + " - " + tt;
                    }
                }
            },
            underlayCallback: function(ctx, area, g) {
                //if (typeof(g[i]) == 'undefined') return;  // won't be set on the initial draw.
                var range = g.xAxisRange();
                var rows = g.numRows();

                // get max and min y
                for (var i = 0; i < rows; i++) {
                    miny = 99999;
                    maxy = -99999;
                    xx = g.getValue(i,0);
                    if (xx < range[0] || xx > range[1]) continue;   // constrain to graph canvas
                    for (var j=1; j<= range.length; j++) {
                        if (g.getValue(i,j) <= miny) miny = g.getValue(i,j);
                        if (g.getValue(i,j) >= maxy) maxy = g.getValue(i,j);
                    }
                    p1 = g.toDomCoords(xx, miny);
                    p2 = g.toDomCoords(xx, maxy);
                    ctx.strokeStyle = "rgba(192,192,224,1)";
                    ctx.lineWidth = 1.0;
                    ctx.beginPath();
                    ctx.moveTo(p1[0], p1[1]);
                    ctx.lineTo(p2[0], p2[1]);
                    ctx.closePath();
                    ctx.stroke();
                    ctx.restore();
                }
            }
        });

Answer 1

您多次呼叫 ctx.restore() 而没有相应呼叫 ctx.save()。这会弹出 dygraphs 自己的绘图上下文，包括裁剪矩形。在 underlayCallback 的顶部调用一次保存，最后调用一次恢复。

退后一步，使用自定义绘图仪可能比使用 underlayCallback 更容易。

Dygraphs - 如何将绘图限制为 canvas

Dygraphs - How do I restrict drawing to canvas

callback