Диаграмма Amcharts остается видимой после прокрутки границ родительского div

У меня есть серия диаграмм, использующих javascript-библиотеку Amcharts на странице моего сайта. Они содержатся внутри div, ограниченного фиксированным заголовком сверху и фиксированным нижним колонтитулом внизу, поэтому div имеет верхний и нижний края, которые не находятся на краях страницы. У меня возникла проблема, когда, когда этот центральный div, содержащий графики, прокручивается, отстает от заголовка, так как он делает это, графики остаются видимыми над заголовком, несмотря на то, что они находятся внутри одного и того же div, который правильно идет за заголовком.Диаграмма Amcharts остается видимой после прокрутки границ родительского div

Это ТОЛЬКО случается с самими графиками. Остальные элементы, включая переключатели выпадающего списка и горизонтальные правила, прокручиваются правильно и идут за заголовком. Кроме того, отдельные divs, которые содержат сами графики, прокручиваются правильно, это только элементы диаграммы, созданные в 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; 
}

UPDATE: Для того, чтобы воспроизвести ошибку, вставьте этот код в 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>

источник

2017-01-26 HenryHunt

Какие единицы вы используете для вашей ширина/высота/и т.д.? Ваш CSS не совсем корректен с отсутствующими единицами, так что, возможно, стоит посмотреть в первую очередь. Вне этого трудно сказать, не видя остальную часть вашего CSS и разметки, поскольку просто использование того, что у вас есть, не вызывает проблемы на моем конце. Если вы можете предоставить скрипку или кодировку, которая воспроизводит это, это очень поможет. – xorspark

@xorspark Я пробовал это, но ничего не меняет. Пожалуйста, см. Мой последний фрагмент кода, очень быструю и простую иллюстрацию проблемы. Просто вставьте его в файл HTML и откройте его. Почему только график остается над фиксированным заголовком? Спасибо – HenryHunt

это не проблема amCharts, это связано с тем, как SVGs визуализируются в отношении г-индексов (я дважды проверил несколько других библиотек диаграмм SVG на основе, а также). Установка явного Z-индекса на ваш заголовок исправляет проблему:

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

Fiddle: https://jsfiddle.net/k18794oe/

источник

2017-01-26 19:28:58 xorspark

Спасибо, отлично работает! – HenryHunt

Диаграмма Amcharts остается видимой после прокрутки границ родительского div

ответ

Смежные вопросы