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

я установил ширину графика:

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

и в наборе html overflow:auto

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

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

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

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

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

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

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

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

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

Это может быть введено после ОП в 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

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

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

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

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

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

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

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

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

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

Если это происходит, высота превышает ожидаемую высоту:

Стиль 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 контейнера при первой загрузке.

Чтобы исправить это, я добавил 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();

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

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

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

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

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

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

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

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

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

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

Например:

До:

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

После:

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

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

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

и сценарий:

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

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

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

попытаться инкапсулировать генерацию старшей диаграммы в событии просмотра страницы

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

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

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

html

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

ts

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

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

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

Я исправил это, добавив / переопределив дополнительные CSS по умолчанию для высоких карт.

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

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

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

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

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

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

, помещенная в ваш файл css после

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