Ширина Highcharts превышает контейнер div при первой загрузке

Ответ 1

Мне позвонил chart.reflow(). Документы: http://api.highcharts.com/highcharts#Chart.reflow

Ответ 2

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

введите ваш файл css после

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

Ответ 3

У меня та же проблема, в моем случае был график с высоким графиком, который отображается после нажатия кнопки. Я положил $(window).resize(); после шоу, и он решил проблему правильно. Надеюсь, вы служите.

Ответ 4

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

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

Ответ 5

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

Я исправил его, добавив/переопределив дополнительный css для стандартного значения по умолчанию.

поэтому в пользовательском файле css добавьте

.highcharts-container{
/** Rules it should follow **/
}

должен исправить вашу проблему. Предполагая, что ваш div "hg = graph" имеет ничего, кроме графиков.

Ответ 6

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

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

HTML

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

ц

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

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

Ответ 7

Определите основные диалоги в документе:

<div style="width:50%" id="charts">

и script:

$(document).ready(function(){
    $(#chart).highcharts(){
    ...
    });
)};

Надеюсь, что это сработает;)

Ответ 8

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

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

Ответ 9

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

Например:

До:

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

После:

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

Ответ 10

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

Ответ 11

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

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

Ответ 12

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

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

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

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

Ответ 13

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

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

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

CODE:

//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();

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

Ответ 14

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

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

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

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

Я столкнулся с этой проблемой начальной нагрузки, переопределив функцию Highcharts 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);

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

Ответ 15

Лучший способ - вызвать chart.reflow в документации по функции отображения событий;

 Highcharts.stockChart( 'chartContainer', {
 chart: {
  events: {
    render: function() {
      this.reflow();
    }
  },
  zoomType: 'x',
   ...
},

и не забудьте установить min-width на ноль и переполнить на скрытый в контейнере диаграммы.

#chartContainter {
  min-width: 0;
  overflow: hidden;
  }

Ответ 16

Вот решение, которое сработало для меня! Некоторое время диаграммы работали нормально, а затем после функции начали превышать свой контейнер. Оказывается, это был атрибут defer в скрипте в заголовке моего приложения.

Попробуйте удалить defer из ваших тегов javascript:

<script defer src="script.js"></script> to <script src="script.js"></script>

Или перемещение моей таблицы стилей выше в голове также, казалось, исправило это, но это менее надежное решение..

Ответ 17

Возможно, это было введено после ОП в 2013 году, но вы можете установить высоту с помощью chart.height (https://api.highcharts.com/highcharts/chart.height).

                options: {
                    chart: {
                        type: 'bar',
                        height: window.innerHeight + 'px',
                    },
                    title: {
                        text: 'Top 10 Users',
                    },
                    subtitle: {
                        text: 'by scores',
                    },

Это веб-решение, но я ожидаю, что вы можете обслужить его jQuery.mobile

Ответ 18

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

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

и в html set overflow:auto

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

Ответ 19

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

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

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

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

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

Ответ 20

Пожалуйста добавьте width:100% к графику контейнера.
Надеюсь, что это разрешит overflow:hidden связанная проблема.

classname{min-height:450px;width: 100%;}