График Google загружается крайне редко, если включен в закладки на основе jQuery

Ответ 1

изменить параметры диаграммы, чтобы установить ширину и высоту по мере необходимости

var options = {
          title: 'Company Performance'
          ,width:900
          ,height:500
        };

Ответ 2

Отображение диаграмм в скрытом div (что, по-видимому, является невыделенными вкладками интерфейса UI), с возможностью визуализации API визуализации, поэтому вы хотите сделать одну из двух вещей: либо отобразить все диаграммы перед созданием экземпляров вкладок или (как вы это заметили) свяжите прослушиватели событий, чтобы рисовать диаграммы при первом открытии вкладки. Установка высоты и ширины в параметрах диаграммы недостаточна для решения проблемы во всех браузерах.

Я просмотрел документацию easytabs, и похоже, что вы должны сделать что-то вроде этого:

// draw chart(s) in your default open tab

// track which tabs you've drawn charts in
var chartsDrawn = {
    tab1: true,
    tab2: false,
    tab3: false
    // etc
};

$('#tab-container').bind('easytabs:after', function (e) {
    if (e.tab == 'tab-2' && !chartsDrawn.tab2) {
        // draw chart(s) in tab 2
        chartsDrawn.tab2 = true;
    }
    else if (e.tab == 'tab-3' && !chartsDrawn.tab3) {
        // draw chart(s) in tab 3
        chartsDrawn.tab3 = true;
    }
    // etc
});

Ответ 3

Вот как я решил использовать angular -bootstrap https://angular-ui.github.io/bootstrap/

<div class="google-chart" google-chart chart="chartObject1" on-ready="displayGoogleCharts()"></div>

<tab heading="Past Week" select="googleChartSizeFix()">

googleChartSizeFix = function() {
    $('svg').parent().css({ opacity:"0" });
    $(window).resize();
};

displayGoogleCharts = function() {
    $('svg').parent().css({ opacity:"1" });
};

Каждый раз, когда выбрана вкладка (запускается функция googleChartSizeFix), Google Chart устанавливается на прозрачность (opacity = 0, поэтому она не исчезает с помощью hide(), но сохраняет свой размер, поскольку его содержимое прозрачно), за которым следует изменение размера окна, это заставляет Google Chart соответствовать содержащему его div, используя ширину 100% и высоту 100%:

"options": {
    "chartArea": {
        "width":'100%',
        "height":'100%'
    }
}

и, наконец, после того, как Google Chart готов (после изменения размера), функция displayGoogleCharts запускается, а непрозрачность диаграммы google reset до 1, поэтому содержимое снова отображается.

Ответ 4

Я наткнулся на эту "особенность" вкладок Bootstrap. При вырезании и вставке нескольких вкладок в мой HTML я случайно оставил вкладку < div class= вкладка active" > в активном состоянии для всех вкладок. В результате содержимое всех вкладок отображалось последовательно на первой вкладке, но уходило, когда вы переключали вкладки.

Мое решение для скрытых вкладок состоит в том, чтобы определить их как активные, а затем удалить "активный" класс из div после вызова chart.draw.

<div class="tab-pane active" id="myid" role="tabpanel">
    <script type="text/javascript">
        // all the chart stuff
        chart.draw(data, options);
        $('#myid').removeClass('active');
    </script>
</div>

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

Ответ 5

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

Например, предположим, что мы хотим установить складной объект с диаграммой в нем:

    <a href="#div-id" data-toggle="collapse">
        Expand
    </a>
    <div id="div-id" class="future-collapse">
       <div id="some-chart"></div>
    </div>

И тогда в вашем сценарии:

/**
 *  Callback function E.G. google.charts.setOnLoadCallback(drawChart);
 */
function drawChart(){
   // Drawing the charts
   draw_some_chart();
   // Applying the collapse class to our elements with the future-collapse class
   $('.future-collapse').attr('class', 'collapse');
}

function draw_some_chart(){
    // Draw your charts
}