dygraph:显示最大值和最小值
dygraph: show maximum and minimum
我的问题和Horizontal line to show average in dygraph类似,但不一样。我了解使用 underlayCallback
但我如何获取基础数据来计算数据的最大值和最小值。我要在数据中突出显示这些点,这些数据是从 csv 文件中读取的,如下所示:gplot.updateOptions({'file': filename});
并且我事先不知道文件名,因此必须即时计算最大值、最小值。我觉得它与 gplot.rawData_
有某种关系,但不知道如何。
谢谢。
您可以查询 Dygraph 的数据集以使用其 getValue
method 获取最小值和最大值,如下所示:
// Calculate the min/max y value in the Dygraph's data set.
function calcMinMax(g) {
var ymin = g.getValue(0, 1), ymax = g.getValue(0, 1), v;
for (var i = 0; i < g.numRows(); i++) {
for (var j = 1; j < g.numColumns(); j++) {
y = g.getValue(i, j);
if (y < ymin) {
ymin = y;
} else if (y > ymax) {
ymax = y;
}
}
}
return [ymin, ymax];
}
要画线,您需要使用 underlayCallback
,例如
underlayCallback: function(ctx, area) {
var mm = calcMinMax(this),
ymin = mm[0],
ymax = mm[1],
canvasYmin = this.toDomYCoord(ymin),
canvasYmax = this.toDomYCoord(ymax);
ctx.strokeStyle= 'red';
ctx.beginPath();
ctx.moveTo(area.x, canvasYmin);
ctx.lineTo(area.x + area.w, canvasYmin);
ctx.moveTo(area.x, canvasYmax);
ctx.lineTo(area.x + area.w, canvasYmax);
ctx.closePath();
ctx.stroke();
}
有关工作示例,请参阅 this jsbin。
我的问题和Horizontal line to show average in dygraph类似,但不一样。我了解使用 underlayCallback
但我如何获取基础数据来计算数据的最大值和最小值。我要在数据中突出显示这些点,这些数据是从 csv 文件中读取的,如下所示:gplot.updateOptions({'file': filename});
并且我事先不知道文件名,因此必须即时计算最大值、最小值。我觉得它与 gplot.rawData_
有某种关系,但不知道如何。
谢谢。
您可以查询 Dygraph 的数据集以使用其 getValue
method 获取最小值和最大值,如下所示:
// Calculate the min/max y value in the Dygraph's data set.
function calcMinMax(g) {
var ymin = g.getValue(0, 1), ymax = g.getValue(0, 1), v;
for (var i = 0; i < g.numRows(); i++) {
for (var j = 1; j < g.numColumns(); j++) {
y = g.getValue(i, j);
if (y < ymin) {
ymin = y;
} else if (y > ymax) {
ymax = y;
}
}
}
return [ymin, ymax];
}
要画线,您需要使用 underlayCallback
,例如
underlayCallback: function(ctx, area) {
var mm = calcMinMax(this),
ymin = mm[0],
ymax = mm[1],
canvasYmin = this.toDomYCoord(ymin),
canvasYmax = this.toDomYCoord(ymax);
ctx.strokeStyle= 'red';
ctx.beginPath();
ctx.moveTo(area.x, canvasYmin);
ctx.lineTo(area.x + area.w, canvasYmin);
ctx.moveTo(area.x, canvasYmax);
ctx.lineTo(area.x + area.w, canvasYmax);
ctx.closePath();
ctx.stroke();
}
有关工作示例,请参阅 this jsbin。