2017-05-26 1 views
1

Ich probiere derzeit Dygraphs aus (was wirklich toll btw scheint!), Aber aus irgendeinem seltsamen Grund funktioniert die Annotations-Funktion nicht für mich, und es scheitert auch genau auf die jsFiddle-Version von Dygraphs 'eigenes Galerie-Beispiel für Anmerkungen, es handelt sich also höchstwahrscheinlich um einen Fehler/ein Problem, auf den sich die Entwickler wirklich (!) Begeben sollten.Anmerkungen funktionieren nicht, nicht einmal in Dygraphs eigenem Beispiel auf jsFiddle, warum?

To (gleiche geschieht sowohl in der neuesten Firefox und neueste Chrome) zu reproduzieren: http://dygraphs.com/gallery/#g/annotations Es funktioniert gut und sieht gut aus: bei den "Anmerkungen" Beispiel in der Dygraphs Galerie, hier

1. Blick , wie folgt aus:

Working annotations on Dygraphs gallery page

2. Drücken Sie die "Edit in jsFiddle" -Taste, für diese sehr Beispiel auf dieser Seite sehr. Sie werden jetzt an jsFiddle gesendet, und wenn Sie dort die Schaltfläche "Ausführen" drücken, wird das Diagramm selbst (farbige Kurven usw.) einwandfrei angezeigt, aber, nur die "Stiele" der Anmerkung "signs" werden angezeigt. während die Textinhalte der Anmerkungen alle als normaler Text auf der linken Seite des Diagramms angezeigt werden ?! Wie folgt aus:

Broken annotations on jsFiddle

scheint wie eine Art von CSS Problem oder ähnlich zu mir, bin ich richtig?

Da das Beispiel Dygraphs eigenen Beispiel ist, die auch auf ihrer eigenen Website funktioniert, aber nicht auf jsFiddle, kann auch jeder Verdacht auf falsch formatierte Daten oder Code losgelassen werden, denke ich. Es passiert auch mit all meinen eigenen Dygraphs-Diagrammen auf meinem eigenen Computer, die ich zu kommentieren versuche, aber dieses native Dygraphs-Galerie-Beispiel ist ein viel besseres Beispiel für die Untersuchung von, denke ich?

Also meine Frage ist natürlich, warum passiert das und wie repariere ich es, um die Anmerkungen richtig funktionieren zu lassen und anzuzeigen?


ADDITION:

sie macht es noch einfacher, um das Problem ohne Zögern zu isolieren.

Hier ist ein sehr einfaches Beispiel für Dygraph Anmerkungen, die ich zusammen auf meiner eigenen lokalen Festplatte gesetzt haben (dh als Stand-alone-HTML-Datei):

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

Wenn ich diese Datei öffnen (lokal mit Datei : // in Chrome auf meinem Computer, die neuesten dygraph.js und dygraph.css im gleichen Verzeichnis haben), ist es das, was ich bekommen:

Local example

wie Sie sehen können, genau das gleiche Problem wie Wie oben beschrieben, erscheint hier nur der "Stamm" des Die Testannotation ist im Diagramm selbst sichtbar, während der Annotationstext ("A") links neben dem Diagramm angezeigt wird.

Die Firebug-Konsole ist leer, nachdem sie diese Datei geladen hat, und keine Versuche (nicht erfolgreich oder nicht), Bilder zu laden, befinden sich ebenfalls auf der Registerkarte Firebug-Netzwerk.

Wieder fühlt sich das sehr nach einer Art von CSS-Positionierungsproblem an, aber ich kann natürlich sehr wohl falsch liegen?

Die Antwort auf diese Frage zu finden wäre dann:

Wie in möglichst wenigen und einfachen Änderungen/Schritte wie möglich, ich würde das lokale Beispiel PoC-Code erhalten für Dygraphs Anmerkungen wie vorgesehen arbeiten, das heißt zeigt der Annotationstext "A" innerhalb eines Quadrats an der korrekten Position innerhalb des Graphen (dh an der Position, an der der "Annotation Stem" gerade gerade angezeigt wird, genau wie im Arbeitsbeispiel auf der Dygraphs-Seite, in meinem ersten Screenendump oben) in dieser Frage)?

Antwort

0

Das Galerie-Beispiel lädt Bilder von dygraphs.com. Wenn Sie das Demo auf jsfiddle laden, versucht es die Bilder von jsfiddle zu laden, was nicht funktioniert. dygraphs annotations funktionieren gut, nur die Bilddateien fehlen.

+0

Vielen Dank für Ihre Antwort! Ich habe zwar vermutet, dass das fehlende Dollarzeichen (und die damit verbundene kaputte Bildmarke in der jsFiddle-Version des Graphen) darauf zurückzuführen war, aber sind die regulären quadratischen Annotations-Textfelder wirklich auch Bilder? Wenn ich Firebug beim Laden des Graphen in jsFiddle starte, ist das einzige versuchte (und fehlgeschlagene) Laden von Bildern das 'dollar.png'? Wenn für die normalen Textanmerkungen auch Bilder benötigt werden, wo finde ich diese Bilder? – QuestionOverflow

+0

Bitte beachten Sie meinen Zusatz zum obigen Fragetext, um Missverständnisse zu vermeiden. Was sollte in diesem sehr einfachen lokalen Beispiel geändert werden, damit die Testanmerkung richtig angezeigt wird? – QuestionOverflow

+0

Bitte sehen Sie jetzt auch meine eigene Antwort hier unten (die noch mehr Fragen zu diesem Fehler/Problem enthält). – QuestionOverflow

0

Es scheint, dass ich mit dem CSS-Positionierungsproblem doch Recht hatte. indem Sie den folgenden HTML-DOM der Seite

Die Anmerkungen werden durch Dygraphs gerendert (dies ist die genaue HTML für den Test Annotation in meinem lokalen Beispielcode in der Frage Test oben, extrahiert Live mit 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> 

Wenn ich (wie von this SO question vorgeschlagen) position: relative zu diesem div die CSS-Eigenschaft hinzufügen (manuell, mit Firebug), sieht das Diagramm plötzlich wie folgt aus:

Correct positioning

Sehen Sie, der Anmerkungstext ist jetzt korrekt positioniert! Es fehlt zwar immer noch der undurchsichtige Hintergrund und der farbige Rand, aber ich denke, das ist nur das Ergebnis von noch mehr CSS-Eigenschaften, die aus irgendeinem Grund fehlen?

Also, konzentrieren wir uns dann darauf, warum fehlt CSS für die Anmerkungen, die ich denke?

Meine beste Vermutung ist, dass die Datei dygraph.css unter bestimmten Bedingungen nicht richtig geladen wird (anscheinend sowohl auf jsFiddle als auch lokal auf meinem Computer, obwohl sie tatsächlich dort im selben Verzeichnis wie die HTML-Datei und dygraph ist. js)? Oder liege ich falsch?

Ein Firebug-Dump des angewandten CSS für das Annotations-Div scheint dies zu unterstützen. Hier ist die CSS von Firebug für die Annotation div mein lokalen Beispiel (und auch gleiche in jsFiddle):

Non-working CSS

Und hier ist die CSS für die gleiche Sache in dem Arbeits Beispiel in der Galerie auf dem Dygraphs Website:

Working CSS

See werden die Klassen von dygraph.css vollständig in meinem lokalen Beispiel fehlt und in dem jsFiddle Beispiel (obwohl in der Tat ausdrücklich in dem Attribut des hTML-Codes der Anmerkung div ist, wie class verwiesen (siehe oben), obwohl die CSS-Datei befindet sich tatsächlich im selben Verzeichnis wie die Datei dygraph.js ?!

@danvk, haben Sie eine Idee, warum dies passiert, und wenn Dygraphs irgendwie gepatcht werden könnte, um dies zu vermeiden, und damit alle CSS laden, die es für die Annotationen soll?

Die einzige funktionierende Hack-Lösung, die ich für den Moment finden, ist der gesamte Inhalt des dygraph.css inline im <head> der HTML-Datei auszugeben, wie es so:

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

Danach ist es endlich funktioniert fein:

enter image description here

Zugabe:

Es scheint, als ob auch andere (1) (2) dieses generelle Problem beim Laden von CSS-Dateien haben. Keine akzeptierte Antwort weder auf diese SO-Frage noch auf den Mozilla-Support-Thread, und tatsächlich funktioniert auch keiner der vorgeschlagenen Antworten für mich. WTF, wie kann solch ein riesiges Problem allgemein unbekannt/unbeantwortet sein? Bitte beachten Sie auch, dass das Gleiche für mich sowohl in Chrome als auch in Firefox und auch auf mehreren Computern passiert, von denen einige die Datei zuvor noch nie geöffnet haben. Daher sollten auch keine merkwürdigen cache-bezogenen Effekte beteiligt sein. So oder so, es scheint, als ob der Fehler außerhalb von Dygraphs Umfang liegt.

0

Ich fürchte, ich bin zu spät zur Party, aber es sieht aus, das Problem ist immer noch gültig (oder Workaround ist nicht gut dokumentiert). Ich konnte eine bessere Einschätzung der Lage haben, indem sie in index.html hinzu:

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

jedoch noch Anmerkungen werden nicht nach dem Diagramm gut: enter image description here

Die Option attachAtBottom: true zu Anmerkungen hinzugefügt könnte Hilfe hier ein wenig, aber immer noch Anmerkungen springen auf schwebenden Graphen (ich vermute, das liegt daran, dass die Legende einen Platz einnimmt)

1

Einstellung Position: absolut

löste das Problem für mich.

Verwandte Themen