En lugar de un gráfico de línea de serie de tiempo típico, necesito dibujar bloques como se ilustra en la transición del diagrama 1 al diagrama 2 a continuación. Tengo drawCallback calculando las coordenadas del lienzo para cada punto, como se muestra. Pero, ¿cómo dibujo realmente los bloques? También necesito ocultar las líneas originales, aunque supongo que podría dibujarlas en blanco. He usado underlayCallback anteriormente para dibujar bloques de fondo, pero estos deben estar en primer plano. Configuré el bucle para iterar y dibujar bloques cuando cambia la coordenada y, pero aquí no hay CTX, como en underlayCallbacks.

Gracias de antemano.

 drawCallback: function (g, initial) { var newdata = []; var startcoord = g.toDomCoords(g.file_[0][0],g.file_[0][1]); var lowerlimit = g.toDomCoords(g.file_[0][0],minstage); console.log(lowerlimit); for (i=0; i<g.file_.length; i++) { newdata[i] = g.toDomCoords(g.file_[i][0],g.file_[i][1]); // when y changes, draw previous block if (newdata[1] != startcoord[1]) { } }

EDITAR: Solución:

 function barChartPlotter(e) { var ctx = e.drawingContext; var points = e.points; // calculate the height of each block var limits1 = e.dygraph.toDomCoords(points[0][0],1); var limits2 = e.dygraph.toDomCoords(points[0][0],2); var height = limits2[1]-limits1[1]; var bar_width = points[2].canvasx - points[1].canvasx; // Do the actual plotting. for (var i = 0; i < points.length; i++) { var p = points[i]; var center_x = p.canvasx; // set colors switch (points[i].yval) { case 1: ctx.fillStyle = "#CC0000"; ctx.strokeStyle = '#CC0000'; break; case 2: ctx.fillStyle = "#00CC00"; ctx.strokeStyle = '#00CC00'; break; case 3: ctx.fillStyle = "#0000CC"; ctx.strokeStyle = '#0000CC'; break; case 4: ctx.fillStyle = "#CC00CC"; ctx.strokeStyle = '#CC00CC'; break; } ctx.fillRect(center_x - bar_width / 2, p.canvasy, bar_width, height-1); ctx.strokeRect(center_x - bar_width / 2, p.canvasy, bar_width, height-1); } }

Resultado perfectamente renderizado: