Заполнить от оси x вверх на линейном графике dygraph

Я хотел бы заполнить линейный график в dygraph от оси x вверх, а не от оси 0 y. Если все значения положительны, то заливка всегда начинается от оси X и выше. Однако, если есть какие-то отрицательные значения, то заливка идет от оси y 0. Есть ли возможность всегда заполнять от оси X?


fill dygraphs
person fnllc    schedule 24.06.2014    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Единственный способ сделать это — написать пользовательский плоттер. .

Но вы должны дважды подумать, прежде чем делать это. Если основа заливки меняется вместе с масштабированием окна, то она не имеет семантического значения.

person danvk    schedule 24.06.2014
comment
Я рисую расстояние в зависимости от высоты, но я нормализую первую точку на 0 высоте. Итак, заливка должна представлять собой местность, поэтому мне нужно, чтобы она всегда была снизу графика до линии. - person fnllc; 24.06.2014
comment
Как насчет увеличения высоты по оси Y? - person danvk; 24.06.2014
comment
Это то, что я сделал, но иногда вы теряете высоту от начала, поэтому она становится отрицательной. Я создам собственный плоттер и опубликую его здесь. - person fnllc; 24.06.2014

arrow_upward
0
arrow_downward

Ниже приведен пользовательский плоттер для достижения результата:

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();
}
person fnllc    schedule 24.06.2014

arrow_upward
0
arrow_downward

зарегистрируйтесь в обратном вызове 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();
}
person user3119770    schedule 03.09.2018