如何在 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 回调让您可以访问 canvas 然后用canvas操作画出你需要的

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 中在线创建区域

How can I create area under in line in Dygraph

dygraphs