Ich habe eine Reihe von Diagrammen, die die Amcharts-Javascript-Bibliothek auf einer Seite meiner Website verwenden. Sie sind in einem div enthalten, das an der Oberseite von einer festen Kopfzeile und unten von einer festen Fußzeile umgeben ist. Daher hat das div obere und untere Kanten, die nicht an den Seitenrändern liegen. Ich habe ein Problem, wo, wenn dieses zentrale div, das die Graphen enthält, gescrollt wird und dabei hinter dem Header bleibt, sind die Graphen weiterhin oberhalb des Headers sichtbar, obwohl sie sich in demselben div befinden, das korrekt hinter dem Header ist.Amchart-Diagramm bleibt sichtbar, nachdem über die Grenzen des Eltern-Divs gescrollt wurde
Dies geschieht nur mit den Grafiken selbst. Der Rest der Elemente, die Dropdown-Auswahlelemente und horizontale Regeln enthalten, blättern korrekt und gehen hinter die Kopfzeile. Auch die einzelnen Divs, die die Graphen selbst enthalten, scrollen korrekt, es sind nur die von Amcharts erzeugten Graphelemente, über die ich keine Kontrolle habe, die nicht richtig scrollen. Warum passiert das und wie kann es behoben werden? Sehen Sie sich das Foto unten an, in dem die rote Box mit der Grafik korrekt hinter der Kopfzeile blättert, aber die Grafik darüber bleibt.
Ich bin nicht ganz sicher, welcher Code zu enthalten, wie es mir scheint, dass das Problem etwas mit amCharts zu tun ist, also hier ist der Code, der die Grafik aufstellt:
AmCharts.makeChart("vDataGraphs_AmbientTemperature", {
"type": "serial",
"dataLoader": {
"url": "retrieve/getReportsForDate.php?date=2017-01-01"
},
"theme": "default",
"plotAreaFillAlphas": 1,
"plotAreaFillColors": "white",
"autoMargins": false,
"marginTop": 25,
"marginRight": 0,
"marginBottom": 20,
"marginLeft": 44,
"categoryField": "timestamp",
"dataDateFormat": "YYYY-MM-DD HH:NN",
"categoryAxis": {
"parseDates": true,
"minPeriod": "ss",
"tickLength": 6,
"centerLabels": true,
"labelOffset": -3
},
"allLabels": [{
"text": "Ambient Temperature so far Today",
"align": "center",
"bold": true,
"size": 18,
"y": -5
}],
"chartCursor": {
"enabled": true,
"categoryBalloonDateFormat": "JJ:NN",
"cursorColor": "#000000",
"fullWidth": true,
"graphBulletSize": 0,
"selectionAlpha": 0.3
},
"balloon": {
"horizontalPadding": 9,
"pointerWidth": 15,
"shadowAlpha": 0
},
"legend": {
"enabled": true,
"horizontalGap": 22,
"left": 0,
"rollOverGraphAlpha": 0,
"switchable": false,
"valueWidth": 0
},
"graphs": [{
"title": "Shielded",
"valueField": "shieldedTemp",
}, {
"title": "Exposed",
"valueField": "exposedTemp",
}],
"valueAxes": [{
"title": "Ambient Temperature (°C)"
}]
});
Hier ist der div, dass die Grafik in angezeigt wird:
<div id="vDataGraphs_AmbientTemperature" style="background: red"></div>
Und sein Styling:
#vDataGraphs_AmbientTemperature {
width: 100%;
height: 400;
background: white;
margin-bottom: -12;
margin-top: 5;
}
Hier ist der Stil für die Haupt div, wo das Scrollen passiert:
.mainContainer {
max-width: 1216;
margin: 0 auto;
margin-top: 100;
margin-bottom: 65;
position: center;
padding-right: 10;
padding-left: 10;
}
UPDATE: Um den Fehler zu reproduzieren, fügen Sie diesen Code in eine HTML-Datei und öffnen Sie sie (die Grafik wird auf den Aufenthalt " Laden von Daten‘message):
<html>
<head>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
function onLoad() {
AmCharts.makeChart("vDataGraphs_AmbientTemperature", {
"type": "serial",
"dataLoader": {
"url": "retrieve/getReportsForDate.php?date=2017-01-01"
},
"theme": "default",
"plotAreaFillAlphas": 1,
"plotAreaFillColors": "white",
"autoMargins": false,
"marginTop": 25,
"marginRight": 0,
"marginBottom": 20,
"marginLeft": 44,
"categoryField": "timestamp",
"dataDateFormat": "YYYY-MM-DD HH:NN",
"categoryAxis": {
"parseDates": true,
"minPeriod": "ss",
"tickLength": 6,
"centerLabels": true,
"labelOffset": -3
},
"allLabels": [{
"text": "this is an Amcharts graph, and should also scroll like the text, but the Amcharts created elements do not do this (things created by me like the div containing the graph scroll fine)",
"align": "center",
"bold": true,
"size": 18,
"y": -5
}],
"chartCursor": {
"enabled": true,
"categoryBalloonDateFormat": "JJ:NN",
"cursorColor": "#000000",
"fullWidth": true,
"graphBulletSize": 0,
"selectionAlpha": 0.3
},
"balloon": {
"horizontalPadding": 9,
"pointerWidth": 15,
"shadowAlpha": 0
},
"legend": {
"enabled": true,
"horizontalGap": 22,
"left": 0,
"rollOverGraphAlpha": 0,
"switchable": false,
"valueWidth": 0
},
"graphs": [{
"title": "Shielded",
"valueField": "shieldedTemp",
}, {
"title": "Exposed",
"valueField": "exposedTemp",
}],
"valueAxes": [{
"title": "Ambient Temperature (°C)"
}]
});
}
</script>
</head>
<body onload="onLoad()" style="margin: 0">
<div style="background: blue; height: 50px; width: 100%; position: fixed; top: 0">
this is a fixed header, and everything in the green div should scroll 'behind' it
</div>
<div style="background: green; margin-top: 50">
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<div id="vDataGraphs_AmbientTemperature" style="width: 100%; height: 400; background: white; margin-bottom: -12; margin-top: 5; background: red;"></div>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
<p>this is some text, and scrolls fine, disappearing as it goes past the boundary of the div</p>
</body>
</html>
Welche Geräte verwenden Sie für Ihre Breite/Höhe/etc? Ihr CSS ist mit fehlenden Einheiten nicht genau gültig, so dass es sich lohnt, zuerst zu suchen. Abgesehen davon ist es schwer zu sagen, ohne den Rest Ihres CSS und Markups zu sehen, da nur das, was Sie verwenden, das Problem nicht an meinem Ende auslöst. Wenn Sie eine Geige oder einen Codepen bereitstellen können, der das reproduziert, würde das viel helfen. – xorspark
@xorspark Ich habe das versucht, aber ändert nichts. Bitte sehen Sie mein letztes Code-Snippet, eine sehr schnelle und einfache Illustration des Problems. Fügen Sie es einfach in eine HTML-Datei ein und öffnen Sie es. Warum bleibt nur der Graph über dem festen Header? Danke – HenryHunt