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

时间：2017-05-26 00:49:19

标签： annotations dygraphs

我目前正在尝试使用Dygraphs（看起来非常非常棒！）但是由于一些奇怪的原因，注释功能对我来说不起作用，而且它也完全失败了在dsgraphs自己的画廊注释示例的jsFiddle版本上，所以这很可能是开发人员真正想要查看的错误/问题（！）。

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

1。 查看Dygraphs库中的“注释”示例，此处： http://dygraphs.com/gallery/#g/annotations 它工作得很好，看起来很棒，像这样：

Working annotations on Dygraphs gallery page

2。 按下“在jsFiddle中编辑”按钮，就那个页面上的那个例子而言。 您现在被发送到jsFiddle，如果您按下“运行”按钮，图表本身（彩色曲线等）显示得很好，但，只有注释“符号”的符号“显示，而注释的文本内容都显示为图表左侧的普通文本？！像这样：

Broken annotations on jsFiddle

看起来像某种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>

当我打开这个文件（在我的计算机上使用文件：//在本地，在同一目录中有最新的dygraph.js和dygraph.css）时，这就是我得到的：

Local example

如您所见，此处出现的问题完全相同，即只有测试注释的“词干”在图表本身中可见，而注释文本（“A”）显示在左侧图表。

加载此文件后，Firebug控制台为空，并且Firebug网络选项卡中的任何位置都没有尝试（不成功或无法）加载任何图像。

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

提供这个问题的答案是：

如何在尽可能少的简单更改/步骤中，使Dygraphs注释的本地示例PoC代码按预期工作，即在图形内正确位置的正方形内显示注释文本“A” （即在当前只显示“注释词干”的位置，就像在Dygraphs页面上的工作示例中所做的那样，在我的第一个screendump中）？

5 个答案:

答案 0 :(得分：1)

设置 位置：绝对

为我解决了这个问题。

答案 1 :(得分：0)

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

答案 2 :(得分：0)

毕竟我似乎对CSS定位问题是正确的。

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

<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），图表突然显示如下：

Correct positioning

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

那么，让我们重点关注为什么我猜这些注释缺少CSS？

我最好的猜测是dygraph.css文件在某些​​条件下没有正确加载（显然在我的计算机上的jsFiddle和本地，即使它确实存在于与HTML文件和dygraph.js相同的目录中） ）？或者我错了吗？

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

Non-working CSS

这里是Dygraphs网站上的工作实例中同样的CSS：

Working CSS

请参阅dygraph.css中的类在我的本地示例和jsFiddle示例中完全缺失（尽管确实在注释div的html代码的class属性中明确引用，如上所示） ，即使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>

之后它终于正常工作了：

enter image description here

<强>增加：

似乎其他人（1）（2）在加载CSS文件方面存在这个普遍问题。虽然SO问题和Mozilla支持线程都没有被接受的答案，但事实上，所提出的答案都不适用于我。 WTF，这样一个巨大的问题怎么可能一般都是未知的/没有答案的？请注意，在Chrome和Firefox以及多台计算机上都会发生同样的事情，其中​​一些计算机之前从未打开过该文件，因此也不应该涉及任何与缓存相关的奇怪效果。无论哪种方式，看起来这个bug都不在Dygraphs的范围之内。

答案 3 :(得分：0)

我担心我迟到了，但看起来问题仍然有效（或者解决方法没有详细记录）。通过添加index.html，我能够更好地估计位置：

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

然而，仍有注释不符合图表： enter image description here

添加到注释中的选项 attachAtBottom：true 可能会对此有所帮助，但仍有注释跳过悬停图（我猜这是因为传说占据了一些位置）

答案 4 :(得分：0)

整天试图解决与本文开头作者相同的问题。是的，更改CSN文件可以使您以某种方式解决问题，但是当我添加以下这一行时，一切都可以自己完成，而不会像铃鼓跳舞：

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

一如既往，您需要更加注意小事情

相关问题
最新问题