打开 Errorbar 时 Dygraphs 中断。也没有显示注释
Dygraphs breaking when turning on Errorbar. Also annotations not showing
我真的很喜欢 dygraphs 中的 errorBar 功能,但我似乎无法使用它。该图正常显示,但如果我将 errorBars 更改为 true,则不再绘制该图。
此外,注释根本没有显示。当我是 "hard coding" 数据时,我能够完成这项工作,但现在看来我将它放入一个数组中,它不再工作了。
function nameAnnotation(ann) {
return "(" + ann.series + ", " + ann.x + ")";
};
var data = [];
data.push([new Date("2007/01/01"),10000,1]);
data.push([new Date("2007/01/02"),9463.777815,16]);
data.push([new Date("2007/01/03"),8748.659709,31]);
data.push([new Date("2007/01/04"),7779.545394,46]);
data.push([new Date("2007/01/05"),6846.280611,61]);
data.push([new Date("2007/01/06"),6042.265704,76]);
data.push([new Date("2007/01/07"),5052.064845,91]);
data.push([new Date("2007/01/08"),4089.830899,106]);
data.push([new Date("2007/01/09"),3195.631158,121]);
data.push([new Date("2007/01/10"),2541.901849,136]);
data.push([new Date("2007/01/11"),1805.774559,151]);
data.push([new Date("2007/01/12"),1167.31813,166]);
data.push([new Date("2007/01/13"),433.566787,181]);
data.push([new Date("2007/01/14"),-475.4670651,196]);
data.push([new Date("2007/01/15"),-1171.779711,211]);
data.push([new Date("2007/01/16"),5000,226]);
data.push([new Date("2007/01/17"),4091.462451,241]);
data.push([new Date("2007/01/18"),3386.055666,256]);
data.push([new Date("2007/01/19"),2728.37301,271]);
data.push([new Date("2007/01/20"),2167.424525,286]);
data.push([new Date("2007/01/21"),1483.230149,301]);
data.push([new Date("2007/01/22"),917.4477079,316]);
data.push([new Date("2007/01/23"),179.2235937,331]);
data.push([new Date("2007-01-24"),-625.1312787,346]);
data.push([new Date("2007/01/25"),-1209.343528,361]);
data.push([new Date("2007/01/26"),-1832.497902,376]);
data.push([new Date("2007/01/27"),-2426.93031,391]);
data.push([new Date("2007/01/28"),-2940.290957,406]);
data.push([new Date("2007/01/29"),-3745.675041,421]);
data.push([new Date("2007/01/30"),-4412.335834,436]);
data.push([new Date("2007/01/31"),-5303.819068,451]);
g = new Dygraph(
document.getElementById("graphdiv"),
data
,
{
labels: [ "Date", "Series1", "Error" ],
//errorBars: true,
axisLineColor: "red",
sigma: 2.0
}
);
g.ready(function() {
g.setAnnotations([
{
series: "Series1",
icon: 'images/Money.png',
width: 35,
height: 45,
x: "2007/01/01",
shortText: "P",
text: "Pay Day"
},
{
series: "Series1",
icon: 'images/Money.png',
width: 35,
height: 45,
x: "2007/01/16",
shortText: "P",
text: "Pay Day"
},
{
series: "Series1",
icon: 'images/dollarsign.png',
width: 18,
height: 20,
x: "2007/01/14",
shortText: "O",
text: "Possible Cash Shortage"
},
{
series: "Series1",
icon: 'images/dollarsign.png',
width: 18,
height: 20,
x: "2007/01/24",
text: "Possible Cash Shortage"
},
{
series: "Series1",
icon: 'images/bill.png',
width: 18,
height: 20,
x: "2007/01/13",
text: "Car Insurance Payment"
},
{
series: "Series1",
icon: 'images/bill.png',
width: 18,
height: 20,
x: "2007/01/23",
text: "Car Loan Payment"
}
]);
});
我不确定这是否是您想要的效果,但是看一下文档中的示例 (http://dygraphs.com/tests/steps.html) 您可以看到为 errorBars
设置数据的正确方法
与其像这样格式化数据:[new Date("2007/01/01"),10000,1]
,不如这样设置:
数据设置
[new Date("2007/01/01"),[10000,1]]
标签设置
labels: [ "Date", "Series1" ]
就注释而言...同样,设置错误。如果您查看它们的设置方式,它会在您的选项中使用 Dygraph 绘制回调函数。注释用法示例:
drawCallback: function(g) {
var ann = g.annotations();
var html = "";
for (var i = 0; i < ann.length; i++) {
var name = nameAnnotation(ann[i]);
html += name + " : " + (ann[i].shortText || '(icon)') + "<br/>";
}
document.getElementById("ann").innerHTML = html;
}
有关正确用法,请参阅以下文档和示例小提琴:
我真的很喜欢 dygraphs 中的 errorBar 功能,但我似乎无法使用它。该图正常显示,但如果我将 errorBars 更改为 true,则不再绘制该图。
此外,注释根本没有显示。当我是 "hard coding" 数据时,我能够完成这项工作,但现在看来我将它放入一个数组中,它不再工作了。
function nameAnnotation(ann) {
return "(" + ann.series + ", " + ann.x + ")";
};
var data = [];
data.push([new Date("2007/01/01"),10000,1]);
data.push([new Date("2007/01/02"),9463.777815,16]);
data.push([new Date("2007/01/03"),8748.659709,31]);
data.push([new Date("2007/01/04"),7779.545394,46]);
data.push([new Date("2007/01/05"),6846.280611,61]);
data.push([new Date("2007/01/06"),6042.265704,76]);
data.push([new Date("2007/01/07"),5052.064845,91]);
data.push([new Date("2007/01/08"),4089.830899,106]);
data.push([new Date("2007/01/09"),3195.631158,121]);
data.push([new Date("2007/01/10"),2541.901849,136]);
data.push([new Date("2007/01/11"),1805.774559,151]);
data.push([new Date("2007/01/12"),1167.31813,166]);
data.push([new Date("2007/01/13"),433.566787,181]);
data.push([new Date("2007/01/14"),-475.4670651,196]);
data.push([new Date("2007/01/15"),-1171.779711,211]);
data.push([new Date("2007/01/16"),5000,226]);
data.push([new Date("2007/01/17"),4091.462451,241]);
data.push([new Date("2007/01/18"),3386.055666,256]);
data.push([new Date("2007/01/19"),2728.37301,271]);
data.push([new Date("2007/01/20"),2167.424525,286]);
data.push([new Date("2007/01/21"),1483.230149,301]);
data.push([new Date("2007/01/22"),917.4477079,316]);
data.push([new Date("2007/01/23"),179.2235937,331]);
data.push([new Date("2007-01-24"),-625.1312787,346]);
data.push([new Date("2007/01/25"),-1209.343528,361]);
data.push([new Date("2007/01/26"),-1832.497902,376]);
data.push([new Date("2007/01/27"),-2426.93031,391]);
data.push([new Date("2007/01/28"),-2940.290957,406]);
data.push([new Date("2007/01/29"),-3745.675041,421]);
data.push([new Date("2007/01/30"),-4412.335834,436]);
data.push([new Date("2007/01/31"),-5303.819068,451]);
g = new Dygraph(
document.getElementById("graphdiv"),
data
,
{
labels: [ "Date", "Series1", "Error" ],
//errorBars: true,
axisLineColor: "red",
sigma: 2.0
}
);
g.ready(function() {
g.setAnnotations([
{
series: "Series1",
icon: 'images/Money.png',
width: 35,
height: 45,
x: "2007/01/01",
shortText: "P",
text: "Pay Day"
},
{
series: "Series1",
icon: 'images/Money.png',
width: 35,
height: 45,
x: "2007/01/16",
shortText: "P",
text: "Pay Day"
},
{
series: "Series1",
icon: 'images/dollarsign.png',
width: 18,
height: 20,
x: "2007/01/14",
shortText: "O",
text: "Possible Cash Shortage"
},
{
series: "Series1",
icon: 'images/dollarsign.png',
width: 18,
height: 20,
x: "2007/01/24",
text: "Possible Cash Shortage"
},
{
series: "Series1",
icon: 'images/bill.png',
width: 18,
height: 20,
x: "2007/01/13",
text: "Car Insurance Payment"
},
{
series: "Series1",
icon: 'images/bill.png',
width: 18,
height: 20,
x: "2007/01/23",
text: "Car Loan Payment"
}
]);
});
我不确定这是否是您想要的效果,但是看一下文档中的示例 (http://dygraphs.com/tests/steps.html) 您可以看到为 errorBars
与其像这样格式化数据:[new Date("2007/01/01"),10000,1]
,不如这样设置:
数据设置
[new Date("2007/01/01"),[10000,1]]
标签设置
labels: [ "Date", "Series1" ]
就注释而言...同样,设置错误。如果您查看它们的设置方式,它会在您的选项中使用 Dygraph 绘制回调函数。注释用法示例:
drawCallback: function(g) {
var ann = g.annotations();
var html = "";
for (var i = 0; i < ann.length; i++) {
var name = nameAnnotation(ann[i]);
html += name + " : " + (ann[i].shortText || '(icon)') + "<br/>";
}
document.getElementById("ann").innerHTML = html;
}
有关正确用法,请参阅以下文档和示例小提琴: