[jquery-mobile] Ширина Highcharts превышает контейнер div при первой загрузке


Answers

это работает как магия

поместите в свой файл css следующее

.highcharts-container {
    width:100% !important;
    height:100% !important;
}
Question

Я использую Highcharts с jQuery Mobile.

У меня есть граф области, который вырисовывается в контейнере data-role="content" jQM data-role="content" и внутри этого контейнера у меня есть следующие div:

<div style="padding-top: 5px; padding-bottom: 10px; position: relative; width: 100%;">
    <div id="hg_graph" style="width: 100%"></div>
</div>

Мой график высоких диаграмм - это основной график, взятый из одного из их примеров, где я не задал свойство width диаграммы.

При первом загрузке график превышает ширину содержащихся div, но при изменении размера браузера он привязывается к соответствующей ширине.

Как я могу сделать это так, чтобы его ширина была правильной при загрузке первой страницы, а не только при изменении размера?

Я просмотрел аналогичные сообщения о переполнении стека, и ни одно из решений, похоже, не работает.

ОБНОВЛЕНИЕ

  1. Я обнаружил, что проблема заключается в том, что динамически генерируемый <rect> Highcharts использует полную ширину окна браузера для загрузки страницы и вообще не берет его из ширины разделителя. Вот html, сгенерированный, когда я проверяю:

    <rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" **width="1920"** height="200"></rect>

  2. Я попытался воспроизвести в JSFiddle, но, похоже, там хорошо работает, и это действительно меня озадачивает. Вот мой код JSFiddle: http://jsfiddle.net/meandnotyou/rMXnY




Я слишком долго боролся с этим, и нашел решение, которое работает для меня. Немного фона на моей установке:

  1. График высоких диаграмм загружался на вкладке моего веб-сайта, которая не видна при входе в сайт.
  2. При переключении на эту вкладку диаграмма находилась за пределами div.

Таким образом, я привязал уникальный идентификатор к этой конкретной вкладке, мы назовем его tab5 , а затем связали функцию щелчка, которая принудительно - и это важная часть - элемент <svg> в контейнере div до 100% с помощью jQuery:

$('#tab5').bind('click', function() {
    $('#container_div svg').width('100%');
});

... и мое здравомыслие было восстановлено. На момент.




для меня я установил ширину диаграммы:

$('#container').highcharts({
    chart: {
        backgroundColor: 'white',
        **width:3000**,
        ..... }

и в html set overflow:auto

<div id="container" style="**width:100%;overflow:auto**;" ></div>



Я только что видел, что иногда одновременно возникает несколько вопросов.

Если это произойдет, высота превысит ожидаемый уровень:

Стиль SCSS:

.parent_container{

    position:relative;

    .highcharts-container{position: absolute; width:100% !important;height:100% !important;}
}

Если ширина превышает контейнер (больше, чем предполагается) или не изменяет размер до меньшего размера :

    let element = $("#"+id);
    element.highcharts({...});

    // For some reason it exceeds the div height.
    // Trick done to reflow the graph. 
    setTimeout(()=>{
        element.highcharts().reflow();
    }, 100 );

Последнее произошло со мной, когда уничтожило диаграмму и создало новую ... новый шел с увеличенной шириной.




Для тех, кто использует угловые и настраиваемые компоненты, не забудьте определить размерный display в css (например, block или flex ) для элемента хоста.

И когда в контейнере диаграммы есть отступы, вы можете найти это незаменимым:

HTML

<chart (load)="saveInstance($event.context)">
...
</chart>

Т.С.

  saveInstance(chartInstance: any) {
    this.chart = chartInstance;
    setTimeout(() => {
      this.chart.reflow();
    }, 0);
  }

В противном случае диаграмма будет просачиваться мимо контейнера при загрузке и получать правильную ширину только при следующем переходе браузера (например, при запуске изменения размера окна).




попробуйте и инкапсулируйте highchart поколение внутри события showhow

$(document).on("pageshow", "#hg_graph", function() {...});



У меня тоже была эта проблема, и решение .highcharts-container css для меня не работало. Мне удалось решить это для моего случая, разделив условие ng-класса (которое устанавливало разные ширины для контейнера div) в отдельные div.

например, это

<div ng-class="condition?'col-12':'col-6'">
    <chart></chart>
</div>

в

<div ng-show="condition" class="col-12">
    <chart></chart>
</div>
<div ng-show="!condition" class="col-6">
    <chart></chart>
</div>

Я не мог сказать, почему это сработало. Я предполагаю, что ng-класс занимает больше времени, чтобы вычислить ширину контейнера, и поэтому highcharts сначала отображает неопределенную ширину? Надеюсь, это кому-то поможет.




Установите ширину диаграммы. Это единственный вариант, который работал для меня.

chart: {
            type: 'line',
            width: 835
        },





Related