Highcharts не изменяет размеры диаграмм внутри вкладок

Ответ 1

Вот рабочий пример:

http://codepen.io/colinsteinmann/pen/BlGfE

В основном функция .reflow() вызывается на каждой диаграмме при нажатии на вкладку. Таким образом, диаграмма перерисовывается на основе новых измерений, которые применяются к контейнеру, когда он становится видимым.

Это самый важный фрагмент кода:

// fix dimensions of chart that was in a hidden element
jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) { // on tab selection event
    jQuery( ".contains-chart" ).each(function() { // target each element with the .contains-chart class
        var chart = jQuery(this).highcharts(); // target the chart itself
        chart.reflow() // reflow that chart
    });
})

Ответ 2

Это мое исправление для этого (с помощью jQuery):

$("[data-highcharts-chart]").each(function () {
    var highChart = Highcharts.charts[$(this).data('highchartsChart')];
    var highChartCont = $(highChart.container).parent();
    highChart.setSize(highChartCont.width(), highChartCont.height());
    highChart.hasUserSize = undefined;
});

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

Ответ 3

У меня была аналогичная проблема, и я обнаружил, что лучше всего не загружать диаграмму, пока не будет показана вкладка. Итак, в показанном на вкладке событии я быстро загружал диаграмму (но только один раз)

Ответ 4

Я просто решил эту проблему со следующим. Использование начальной загрузки версии 3.3.5

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

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        $(e.target.hash).highcharts().reflow();
    });

HTML

<!-- Nav tabs -->
<ul class="nav nav-pills nav-justified" role="tablist" id="taks-tabs">
    <li role="presentation" class="active"><a href="#taks_met_std" aria-controls="taks_met_std" role="tab" data-toggle="tab">Met Standard</a></li>
    <li role="presentation"><a href="#taks_comm_perf" aria-controls="taks_comm_perf" role="tab" data-toggle="tab">Commended Performance</a></li>
    <li role="presentation"><a href="#taks_m_met_std" aria-controls="taks_m_met_std" role="tab" data-toggle="tab">TAKS-M Met Standard</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="taks_met_std"></div>
    <div role="tabpanel" class="tab-pane" id="taks_comm_perf"></div>
    <div role="tabpanel" class="tab-pane" id="taks_m_met_std"></div> 
</div>

Ответ 5

добавьте class="chart" ко всем контейнерам с высокими стандартами в вкладках.

добавить этот код jQuery:

jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function () { 
    $( '.chart' ).each(function() { 
        $(this).highcharts().reflow();
    });
})

Ответ 6

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

Добавьте это в свой CSS

.tab-content > .tab-pane,
.pill-content > .pill-pane {
    display: block;     
    height: 0;          
    overflow-y: hidden; 
}

.tab-content > .active,
.pill-content > .active {
    height: auto;       
} 

Для получения дополнительной информации посетите страницу, на которой я нашел решение на https://jonpolygon.com/bootstrap-tabs-100-percent-width-charts/

Ответ 7

я исправляю эту проблему с помощью следующего кода.

        $('#yourDivChart').highcharts({
            chart: {
                type: data.EjeX.Tipo,
                //width: width,
                //height: height,
                options3d: {
                    enabled: true,
                    alpha: 15,
                    beta: 15,
                    viewDistance: 25,
                    depth: 40
                },
                width: $('#DivContainerWithYourTabs').width() - 150
            },

в моем случае это частичный "_partialDetalleProyecto"

Я надеюсь, что работает с вами.

Ответ 8

Итак, это немного устарело, но для тех, кто споткнулся об этом, у меня была аналогичная проблема с неправильными размерами высоких строк на вкладке с вкладками. Решение, с которым я столкнулся, состояло в том, чтобы просто отложить создание диаграммы на 100 мс с помощью setTimeout().

setTimeout(function() {
    drawBarChart();
}, 100);

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

Ответ 9

У меня 2 вкладки, встретил такую же проблему. Я изменил только 2 строки кодов Друски, и это сработало.

function anyname() {
$("[data-highcharts-chart]").each(function () {
var highChart = Highcharts.charts[$(this).data('highchartsChart')];
var highChartCont = $(highChart.container).parent();
highChart.reflow();

});

}

и добавьте одно событие onclick к вашим кодам вкладки HTML, как показано ниже:

   <input type="radio" id="tab1_1" checked  onclick="anyname();" >