Проблемы с отображением / отображением вкладок и Highcharts в пользовательском интерфейсе jQuery - PullRequest
Новая
       18

Проблемы с отображением / отображением вкладок и Highcharts в пользовательском интерфейсе jQuery

17 голосов
/ 16 апреля 2011

Кто-нибудь когда-либо использовал вкладки (jquery-ui-1.8.9) и круговые диаграммы из Highcharts 2.1.4 вместе? Проще говоря, у меня есть несколько вкладок, где каждая вкладка показывает круговую диаграмму с различными данными. Диаграммы действительно отображаются в div, но когда я нажимаю на 2-ю вкладку, диаграмма как-то показывает 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>

Снова, график рендерится, но на 2-й вкладке дисплей прослушивается.

Обновление: я знаю, что этот ВИД решает проблему: 

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

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

Ответы [ 13 ]

12 голосов
/ 09 декабря 2012

Это мое решение (проверено только в 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);       
});
6 голосов
/ 07 апреля 2012

Модификация, необходимая для работы 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

4 голосов
/ 27 апреля 2011

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

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

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

  }
});
3 голосов
/ 11 февраля 2014

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

$(window).trigger('resize');
2 голосов
/ 16 мая 2014

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

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

$('#chart-1').highcharts().reflow();
1 голос
/ 22 августа 2012

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

.tab-pane { width: 1200px; }
0 голосов
/ 29 июля 2017

Это сработало для меня после добавления имени класса (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
            }
0 голосов
/ 04 июня 2016

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

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

jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function () { 
    $( '.chart' ).each(function() { 
        $(this).highcharts().reflow();
    });
})
0 голосов
/ 01 июля 2014

Я столкнулся с той же проблемой, метод 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>
0 голосов
/ 08 февраля 2013

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-объект, который не загружается должным образом в скрытых вкладках.

Страница:
...