Question

我想从x轴向上填充dygraph中的线图，而不是从0 y轴填充。如果所有值均为正值，则填充始终从x轴向上。但是，如果存在一些负值，则填充来自0 y轴。是否可以选择始终从x轴填充？

Answer 1

执行此操作的唯一方法是编写custom plotter。

但是在做这件事之前你应该三思而后行。如果填充的底部随缩放窗口而变化，则它没有语义含义。

Answer 2

以下是实现结果的自定义绘图仪：

function filledLinePlotter(e) {
    var ctx = e.drawingContext;
    // Find minimum y
    var min_y = e.points[0].yval;
    for (var i = 1; i < e.points.length; i++) {
      if (isNaN(e.points[i].yval) == false) {
        min_y = Math.min(min_y,e.points[i].yval);
      }
    }
    var y_bottom = e.dygraph.toDomYCoord(min_y*2); // Ensures filling to x axis
    // Fill    
    var rgb = new RGBColorParser(e.color);
    var err_color = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',0.15)';
    ctx.fillStyle = err_color;
    ctx.beginPath();
    ctx.moveTo(e.points[0].canvasx, e.points[0].canvasy);
    for (var i = 1; i < e.points.length; i++) {
      var p = e.points[i];
      ctx.lineTo(p.canvasx, p.canvasy);
    }
    ctx.lineTo(p.canvasx, y_bottom);
    ctx.lineTo(e.points[0].canvasx, y_bottom);
    ctx.lineTo(e.points[0].canvasx, e.points[0].canvasy);
    ctx.closePath();
    ctx.fill();
    // Line
    ctx.beginPath();
    ctx.moveTo(e.points[0].canvasx, e.points[0].canvasy);
    for (var i = 1; i < e.points.length; i++) {
      var p = e.points[i];
      ctx.lineTo(p.canvasx, p.canvasy);
    }
    ctx.stroke();
}

Answer 3

注册到underlayCallback回调可让您访问画布，然后使用画布操作绘制所需的内容

underlayCallback: function(context, area, dygraph) {

canvas = context;
dygr = dygraph              
// use this value to get the with and height

canvasWidth =  context.canvas.width
canvasHeight = context.canvas.height

canvas .beginPath();
canvas .fillStyle= `rgba(255,0,0,0.2)`;
for (let i=0 ; i< data.length ; ++i){
    let p = data[i];
    p = [dygraph.toDomXCoord(p[0]), dygraph.toDomYCoord(p[1])];
    if(i === 0){
        canvas.moveTo(p[0],p[1]);
        continue;
    }
    canvas .lineTo(p[0],p[1]);
}
canvas.fill();
}

在dygraph线图中从x轴向上填充

3 个答案: