jquery-mobile документация - Ширина Highcharts превышает контейнер div при первой загрузке





line zoom (14)


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

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

и в html set overflow:auto

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

Я использую 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




У меня тоже была эта проблема, и решение .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 сначала отображает неопределенную ширину? Надеюсь, это кому-то поможет.




Сегодня я столкнулся с одной и той же проблемой - не на мобильном телефоне, а с маленьким размером окна при загрузке первой страницы. Когда страница загружается, диаграмма скрыта, то после некоторых выборов на странице мы создаем диаграмму. Мы установили минимальную ширину и максимальную ширину для контейнера в css, но не ширину.

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

Поскольку ширина не задана, клонированный div пытается взять как можно больше места - вплоть до максимальной ширины, которую я установил. Элементы SVG создаются с использованием этой ширины, но добавляются в контейнер контейнера диаграммы, который в настоящее время меньше (в зависимости от размера экрана). В результате диаграмма простирается за границы контейнера div.

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

Я столкнулся с этой проблемой начальной загрузки, переопределив функцию cloneRenderTo которая клонирует div для получения размеров:

(function (H) {
    // encapsulated variables
    var ABSOLUTE = 'absolute';

    /**
    * override cloneRenderTo to get the first chart display to fit in a smaller container based on the viewport size
    */
    H.Chart.prototype.cloneRenderTo = function (revert) {
        var clone = this.renderToClone,
            container = this.container;

        // Destroy the clone and bring the container back to the real renderTo div
        if (revert) {
            if (clone) {
                this.renderTo.appendChild(container);
                H.discardElement(clone);
                delete this.renderToClone;
            }

            // Set up the clone
        } else {
            if (container && container.parentNode === this.renderTo) {
                this.renderTo.removeChild(container); // do not clone this
            }
            this.renderToClone = clone = this.renderTo.cloneNode(0);
            H.css(clone, {
                position: ABSOLUTE,
                top: '-9999px',
                display: 'block' // #833
            });
            if (clone.style.setProperty) { // #2631
                clone.style.setProperty('display', 'block', 'important');
            }
            doc.body.appendChild(clone);

            //SA: constrain cloned element to width of parent element
            if (clone.clientWidth > this.renderTo.parentElement.clientWidth){
                clone.style.width = '' + this.renderTo.parentElement.clientWidth + 'px';
            }

            if (container) {
                clone.appendChild(container);
            }
        }
    }

})(Highcharts);

Я сохранил эту функцию в отдельном файле сценария, который загружается после загрузки сценария Highchart.js.




У меня также такая же проблема в моем приложении, где я использую угловые, и я также использую директиву ngCloak, которую я удалил, поскольку мне это не нужно

после этого моя проблема решена.




Я разрешил эту проблему (для моего случая), убедившись, что содержащиеся элементы пользовательского интерфейса отображают перед диаграммой, позволяя Highcharts вычислять правильную ширину.

Например:

До:

var renderChart = function(){
...
};
renderChart();

После:

var renderChart = function(){
...
};
setTimeout(renderChart, 0);



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

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

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



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

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

Стиль 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 );

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




Я также столкнулся с этой проблемой. как затронутые на рабочем столе, так и в мобильном режиме.

В моем случае у меня есть диаграмма, которая обновляет цвет сериала в зависимости от минимального или максимального. После обновления точек ширина высоких диаграмм превышает контейнер div при первой загрузке.

Чтобы исправить это, я добавил add chart.reflow (); после обновления очков.

КОД:

//First declare the chart
var chart = $('#TopPlayer').highcharts();
//Set the min and max
var min = chart.series[0].dataMin; //Top Losser
var max = chart.series[0].dataMax; //Top Winner

for (var i = 0; i < chart.series[0].points.length; i++) {
    if (chart.series[0].points[i].y === max) {
        chart.series[0].points[i].update({
            color: 'GREEN',
        });
    }
    if (chart.series[0].points[i].y === min) {
        chart.series[0].points[i].update({
            color: 'RED',
        });
    }
}

// redraw the chart after updating the points
chart.reflow();

Надеюсь, это поможет тем, у кого такая же проблема, как и я. :)




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

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

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

$('#tab5').bind('click', function() {
    $('#container_div svg').width('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() {...});



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

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







jquery-mobile highcharts