如何在Dygraph中在线下创建区域

Question

我在Dygraph画廊中看过“Stacked”图表，我想创建类似但没有堆叠的东西。即，只需用选定的颜色将线下方填充到y轴零线。

这可能吗？

我需要提供哪些选项？

Answer 1

是的，在您的选项数组中，您可以将其设置为fillGraph，如下所示

{
    legend: 'always',   
    title: 'Graph Name',   
    ylabel: 'Incoming MBps',   
    xlabel: 'Date Time',   
    fillGraph: true,   
    stackedGraph: false
}

以下是其余参考：

http://dygraphs.com/options.html#fillGraph

Answer 2

注册到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();
}