当打开错误栏时，图形中断.还有注解没有显示

Dygraphs breaking when turning on Errorbar. Also annotations not showing

本文关键字：显示 中断 图形 错误      更新时间：2023-09-26

我真的很喜欢dygraphs中的errorBar功能，但我似乎不能让它工作。图形正常显示，但如果我将errorBars更改为true，则不再绘制图形。

注释也没有显示。当我"硬编码"数据时，我能够得到这项工作，但现在看来，我把它放入一个数组，它不再工作了。

 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;
    }

请参阅以下文档和示例文件了解正确使用方法:

http://jsfiddle.net/eM2Mg/7144/

http://dygraphs.com/options.html注释

相关文章：