Question

我已经看过＆＃34; Stacked＆＃34; Dygraph图库中的图表，我想创建类似但没有堆叠的东西。即只需用选定的颜色填充线下方的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();
}

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

2 个答案: