Question

我在我的网站页面上使用Amcharts javascript库有一系列图表。它们包含在一个div中，该div由顶部固定的标题和底部的固定页脚限定，因此div的顶部和底部边缘不在页面的边缘。我遇到了一个问题，当包含图形的这个中央div被滚动时，在标题后面这样做，尽管在正好位于标题后面的同一个div内，图形仍继续在标题上方可见。 / p>

这只发生在图表本身。其余的元素，包括下拉选择器和水平规则，正确滚动并在标题后面。此外，包含图形的各个div本身也可以正确滚动，只有Amcharts生成的图形元素，我无法控制，不能正确滚动。为什么会发生这种情况？如何解决？请参见下面的照片，其中包含图表的红色框在标题后面正确滚动，但图表仍位于其顶部。

我不太确定要包含哪些代码，因为在我看来这个问题与Amcharts有关，所以这里是设置图表的代码：

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)"
      }]
});

这是图表显示的div：

<div id="vDataGraphs_AmbientTemperature" style="background: red"></div>

它的造型：

#vDataGraphs_AmbientTemperature {
  width: 100%;
  height: 400;
  background: white;
  margin-bottom: -12;
  margin-top: 5;
}

这是主div的样式，滚动发生在哪里：

.mainContainer {
  max-width: 1216;
  margin: 0 auto;
  margin-top: 100;
  margin-bottom: 65;
  position: center;
  padding-right: 10;
  padding-left: 10;
}

更新：要重现错误，请将此代码粘贴到html文件中并打开它（图表将保留在“加载数据”消息上）：

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

Answer 1

这不是一个amCharts问题，它与如何使用z-index呈现SVG有关（我还仔细检查了其他几个基于SVG的图表库）。在标题上设置显式z-index可以解决问题：

<div style="background: blue; height: 50px; width: 100%; position: fixed; top: 0; z-index: 1">
    this is a fixed header, and everything in the green div should scroll 'behind' it
</div>

小提琴：https://jsfiddle.net/k18794oe/

滚动经过父div的边界后，Amcharts图表保持可见

1 个答案: