Подтвердить что ты не робот

Экран jQuery UI Tabs и Highcharts для отображения/вывода

Кто-нибудь когда-либо использовал вкладки (jquery-ui-1.8.9) и круговые диаграммы из Highcharts 2.1.4 вместе? Проще говоря, у меня есть несколько вкладок, где каждая вкладка показывает круговую диаграмму с разными данными. Графики DO визуализируются в divs, но когда я нажимаю на вторую вкладку, диаграмма каким-то образом показывает 300px справа от того, где она должна быть. Всякий раз, когда я увеличиваю или уменьшаю окно браузера, диаграмма возвращается в положение коррекции.

Мой код:

//Предположим, что вкладки числа создаются на основе переменной $count и есть 2 вкладки

<script type="text/javascript">

var chart_tab_<?=count?>;

$(document).ready(function() {
    chart_tab_<?=count?> = new Highcharts.Chart({
      chart: {
         renderTo: 'chart_tab_<?=count?>',
         // blah blah
      }

<body>
    <div id="chart_tab_<?=count?>"></div>
</body>

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

Обновление: я знаю, что этот KIND OF исправляет проблему:

<script type="text/javascript"> 
   $(document).ready(function() {
      $( "#tabs" ).tabs({
          cookie: { expires: 1 }
      });
      $( "#tabs" ).tabs({
          select: function(event, ui) { window.location.reload(); }
      });
   });

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

4b9b3361

Ответ 1

Это мое решение (проверено только в Safari и Firefox). Он отлично работает, если вы хотите загрузить диаграмму в скрытую вкладку на странице с гибкой шириной. Изменение размера диаграммы при изменении размера окна браузера.

В настройках диаграммы установите ширину диаграммы на вкладке, которая открывается при загрузке страницы (используя jQuery для получения ширины):

   var chart = new Highcharts.Chart({
     chart: {
       renderTo: 'container',
       type: 'column',
       width: $('#tab-1').width()
     },
     ....

Следующая функция регулирует ширину, если размер окна браузера изменяется. 500 - высота. Это делается автоматически, если ширина не указана в параметрах диаграммы.

$(window).resize(function() {
   chart.setSize($('#chart_tab').width(),500);       
});

Ответ 2

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

 <style type="text/css">
.ui-tabs .ui-tabs-hide {
     position: absolute;
     top: -10000px;
     display: block !important;
}           
 </style>

пример добавления: http://www.highcharts.com/studies/jquery-ui-tabs.htm

Ответ 3

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

Вот какой-то псевдо-код, чтобы дать вам представление о том, что я себе представляю. Это не проверено.

$("#tabs").tabs({
  select: function(event, ui) {
     var chart = new Highcharts.Chart({
      chart: {
       renderTo: ui.panel.id,
       // blah blah
      }
     });

  }
});

Ответ 4

Вы должны вручную инициировать событие изменения размера

$(window).trigger('resize');

Ответ 5

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

Chart.reflow и эта ссылка jsfiddle, а также этот код, который вы добавили в обратный вызов вкладки:

$('#chart-1').highcharts().reflow();

Ответ 6

Меньшее обходное решение использует статическую ширину для ваших диаграмм (если вы знаете, что это должно быть) в CSS -

.tab-pane { width: 1200px; }

Ответ 7

У меня был аккордеон jQuery, который открывался с искаженными диаграммами... это было мое решение:

сначала заполняется диаграммами в глобальном: window.myNamespace.charts. # {container_id}, а затем в моем аккордеоне я делаю это:

$('#my-accordion').accordion
  ...,
  change: () ->
    chartId = ui.newContent.find('.highcharts-container').parent().attr('id')
    window.myNamespace.charts[chartId].setSize(248,220) if chartId?

выше, это coffeescript, но его должно быть достаточно легко перевести...

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

Ответ 8

Привет, см. мою скрипку jsfiddle

...
$("#tabs").tabs();
var ids = ['chart-1', 'chart-2', 'chart-3'];
for (var i = 0, j = ids.length; i < j; i++) {
    if ((container = $('#'+ids[i])).size()) {
        if (container.width()==0) {
            container.width(container.actual('width'));   
        }

        oclone = $.extend({}, options);
        oclone.chart.renderTo = ids[i];
        new Highcharts.Chart(oclone);
    }

}
...

Ответ 9

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

Вместо:

$(document).ready(function() { 
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});​

Использование:

$('#tabcontainer').on('tabsactivate', function (event, ui) { 
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});​

Ответ 10

jQuery UI 1.9+ изменил способ скрытия вкладок, вы должны установить свои собственные классы при активации вкладок следующим образом:

$('#tabs').tabs({
  beforeActivate: function (event, ui) {
    $(ui.oldPanel).addClass('ui-tabs-hide');
    $(ui.newPanel).removeClass('ui-tabs-hide');
  }
});

в сочетании со следующим CSS:

.ui-tabs-hide { 
  display: block !important; 
  height: 0!important; 
  width: 0!important; 
  border:none!important; 
}

Это также устранит любой встроенный объект Flash, который не загружается должным образом в скрытые вкладки.

Ответ 11

У меня столкнулась с той же проблемой, метод reflow() работает для меня. Я понимаю соответствующую диаграмму, обращаясь к глобальной переменной Highcharts. Здесь порядок диаграмм - порядок вкладок.

<script type="text/javascript">
    $(function () {
        $("#tabs").tabs({
            show: function (event, ui) {
                var chart = Highcharts.charts[ui.index];
                if (chart != null) {
                    chart.reflow();
                }
            }
        });
    });
</script>

Ответ 12

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

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

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

Ответ 13

Это сработало для меня после добавления имени класса (contains-chart) на вкладках

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
            }