注释不起作用，甚至在 Dygraphs 自己的 jsFiddle 示例中也不起作用，为什么？

Question

我目前正在试用 Dygraphs（顺便说一句，确实很棒！），但由于某些奇怪的原因，注释功能对我不起作用，而且它也在 Dygraphs 自己的注释库示例的 jsFiddle 版本上以完全相同的方式失败，所以这很可能是 bug/problem 开发人员可能真的想看看（！）。

重现（同样的事情发生在最新的 Firefox 和最新的 Chrome）：

1。查看 Dygraphs 画廊中的 "annotations" 示例，此处： http://dygraphs.com/gallery/#g/annotations 它工作正常并且看起来很棒，像这样：

2。按 "Edit in jsFiddle" 按钮，对于那个页面上的那个例子。你现在被发送到 jsFiddle，如果你在那里按下 "Run" 按钮，图表本身（彩色曲线等）显示得很好，但是，只有 "stems"的注解"signs"被显示出来，而注解的文本内容全部显示为图表左侧的普通文本？！像这样：

似乎是某种 CSS 问题或与我相似，我说的对吗？

由于该示例是 Dygraphs 自己的示例，它也可以在他们自己的站点上运行，但不能在 jsFiddle 上运行，所以我想也可以放弃所有对格式数据或代码不正确的怀疑。它也发生在我自己的计算机上我尝试注释的所有 Dygraphs 图表上，但我猜这个本地 Dygraphs 画廊示例是一个更好的调查示例？

所以，我的问题当然是，为什么会发生这种情况，我该如何解决才能让注释正常工作和显示？

添加：

让我们更简单一些，以便毫不犹豫地隔离问题。

这是我放在自己本地磁盘上的一个非常简单的 Dygraph 注释示例（即作为一个独立的 HTML 文件）：

<html>
<head>
<script type="text/javascript" src="dygraph.js"></script>
<link rel="stylesheet" src="dygraph.css" />
</head>
<body>
<div id="test_chart" style="width:750px; height:350px;"></div>

<script type="text/javascript">
  var test_annotations = [
    {
      series: "TestCol1",
      x: "2017-05-26",
      shortText: "A",
      text: "Test annotation",
      cssClass: 'annotation'
    }
  ];

  testchart = new Dygraph(
    document.getElementById('test_chart'),
    "Date,TestCol1\n" +
    "2017-05-25,110\n" +
    "2017-05-26,80\n" +
    "2017-05-27,75\n",
    {}
  );
  testchart.setAnnotations(test_annotations);
</script>
</body>
</html>

当我打开这个文件时（在我的电脑上本地用 file:// 在 Chrome 中，在同一目录中有最新的 dygraph.js 和 dygraph.css），这是什么我得到：

如您所见，这里出现了与上述完全相同的问题，即在图表本身中只有测试注释的 "stem" 是可见的，而注释文本 ("A")显示在图表的左侧。

加载此文件后，Firebug 控制台为空，并且在 Firebug 网络选项卡中也找不到加载任何图像的尝试（无论是否成功）。

同样，这对我来说感觉像是某种 CSS 定位问题，但我当然很可能是错的？

这个问题的答案是：

如何在尽可能少和简单的情况下 changes/steps 让 Dygraphs 注释的本地示例 PoC 代码按预期工作，即在正方形内显示注释文本 "A"图表内的正确位置（即 "annotation stem" 当前刚刚显示的位置，就像在 Dygraphs 页面上的工作示例中所做的那样，在我上面这个问题的第一个屏幕转储中）？

Answer 1

图库示例从 dygraphs.com 加载图像。当您在 jsfiddle 上加载演示时，它会尝试从 jsfiddle 加载图像，但这是行不通的。 dygraphs 注释工作正常，只是缺少图像文件。

Answer 2

看来我对 CSS 定位问题的看法毕竟是对的。

注释由 Dygraphs 通过将以下 HTML 添加到页面的 DOM 来呈现（这是我在本地示例代码中的测试注释的确切 HTML上面的问题测试，使用 Firebug):

实时提取

<div style="font-size: 14px; left: 392.5px; top: 241.214px; width: 16px; height: 16px; color: rgb(0, 128, 128); border-color: rgb(0, 128, 128);" class="dygraph-annotation dygraphDefaultAnnotation dygraph-default-annotation annotation" title="Test annotation">A</div>

如果我（按照 this SO question 的建议）将 CSS 属性 position: relative 添加到此 div（手动，使用 Firebug ), 图形突然变成了这样:

看，现在注释文本的位置正确了！虽然它仍然缺少不透明的背景和彩色边框，但我猜这只是由于某种原因缺少更多 CSS 属性的结果？

那么，让我们关注一下我猜为什么缺少 CSS 注释？

我最好的猜测是 dygraph.css 文件在某些情况下没有正确加载（显然在 jsFiddle 和本地计算机上，即使它确实与 HTML 文件和 dygraph.js)？还是我错了？

为注释 div 应用的 CSS 的 Firebug 转储似乎支持这一点。这是来自 Firebug 的 CSS，用于我本地示例的注释 div（在 jsFiddle 中也是如此）：

这里是 Dygraphs 网站图库中工作实例中相同内容的 CSS：

看，dygraph.css 中的类在我的本地示例和 jsFiddle 示例中完全缺失（即使在注释 [= 的 class 属性中确实明确引用81=] 的 html 代码，如上所示），即使 CSS 文件确实与 dygraph.js 文件位于同一目录中？！

@danvk，你知道为什么会发生这种情况吗，是否可以通过某种方式修补 Dygraphs 以避免这种情况发生，从而加载它应该用于注释的所有 CSS？

目前我能找到的唯一可行的黑客解决方案是将 dygraph.css 的全部内容内联转储到 HTML 文件的 <head> 中，如下所示：

<style>
/**
 * Default styles for the dygraphs charting library.
 */

.dygraph-legend {
  position: absolute;
  font-size: 14px;
  z-index: 10;
  width: 250px;  /* labelsDivWidth */
  /*
  dygraphs determines these based on the presence of chart labels.
  It might make more sense to create a wrapper div around the chart proper.
  top: 0px;
  right: 2px;
  */
  background: white;
  line-height: normal;
  text-align: left;
  overflow: hidden;
}

...

/* For y2-axis label */
.dygraph-label-rotate-right {
  text-align: center;
  /* See http://caniuse.com/#feat=transforms2d */
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}
</style>

之后它终于可以正常工作了：

加法：

似乎其他人 (1) (2) 也有关于加载 CSS 文件的一般问题。 SO 问题和 Mozilla 支持线程都没有可接受的答案，事实上，none 的建议答案也对我有用。卧槽，这么大的问题怎么可能一般unknown/unanswered？另请注意，我在 Chrome 和 Firefox 中以及在多台计算机上都会发生同样的事情，其中一些以前从未打开过文件，因此也不应该涉及奇怪的缓存相关影响。无论哪种方式，该错误似乎都超出了 Dygraphs 的范围。

Answer 3

恐怕我来晚了，但看起来问题仍然存在（或者没有详细记录解决方法）。通过添加 index.html:

我能够更好地估计位置

<style>
    .dygraph-annotation {
        position : relative;
        display:inline-block;
    }
</style>

然而，注释仍然没有很好地遵循图表：

添加到注释的选项 attachAtBottom : true 在这里可能会有所帮助，但注释仍然在悬停图上跳跃（我猜这是因为图例占据了某些位置）

Answer 4

设置位置：绝对

帮我解决了问题。

Answer 5

一整天都在尝试解决与本文开头作者相同的问题post。是的，更改 CSN 文件可以让您以某种方式解决问题，但是当我添加这一行时，一切都自动运行，无需手鼓跳舞：

link rel = "stylesheet" href = "// cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.css" /

一如既往，你需要在小事上更加用心）

注释不起作用，甚至在 Dygraphs 自己的 jsFiddle 示例中也不起作用，为什么？

Annotations not working, not even in Dygraphs' own example on jsFiddle, why?

annotations

dygraphs