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

Проблемы с отображением / отображением вкладок и 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 ]

0 голосов
/ 06 февраля 2013

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

Вместо: 

$(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]
        }]
    });
});​
0 голосов
/ 01 февраля 2013

Привет, смотри на мою скрипку 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);
    }

}
...
0 голосов
/ 11 апреля 2012

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

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