График jqPlot в аккордеоне

Question

Я хочу построить график внутри аккордеона jQuery, но он заставит график расколоться и масштабируемые изображения. Кто-нибудь получил за это право?

Answer 1

Как объясняется на странице jqPlot Tab and Accordion UI Widgets, jqPlot должен знать размер графика при его построении, и он не может этого сделать, если диаграмма скрыта на аккордеоне или вкладке. Решение состоит в том, чтобы либо указать размеры диаграммы альтернативным способом, либо вызвать replot, когда аккордеон будет расширен. См. Tab and Accordion UI Widgets для получения полной информации и кода примера.

Answer 2

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

Здесь сюжет создается в DIV с именем chart1, который находится внутри скрытой JQuery UI вкладки:

plot1 = $.jqplot('chart1', [l1, l2, l3], { 
    title: "I was hidden", 
    lengend:{show:true}, 
    series:[{},{yaxis:'y2axis'}, {yaxis:'y3axis'}], 
    cursor:{show:true, zoom:true}, 
    axesDefaults:{useSeriesColor:true} 
}); 

А затем обработчик события зарегистрирован в событии 'tabsshow', запущенном вкладкой пользовательского интерфейса jQuery. В вашем случае вы захотите зарегистрировать обработчик для события «accordionchange», запущенного виджетами jQuery UI Accordion после завершения изменения состояния аккордеона. Вот как вы связываете с «tabsshow» события на вкладке для приведенного выше примера кода:

$('#tabs').bind('tabsshow', function(event, ui) { 
    if (ui.index == 1 && plot1._drawCount == 0) { 
    plot1.replot(); 
    } 
    else if (ui.index == 2 && plot2._drawCount == 0) { 
    plot2.replot(); 
    } 
}); 

Там также рабочий пример в том же ui.html файл с гармошкой. Вы можете найти пример в последней версии от bitbucket здесь: jqplot.1.0.0a_r701

Кроме того, убедитесь, что вы не создаете экземпляр нескольких объектов jqPlot в одном и том же div или у вас будут участки, расположенные друг над другом и перегруженные браузера.

Answer 3

Скрытые элементы, как вкладки или аккордеон элемент не имеют размера, так что вы можете использовать технику, указанную в документации jqplot, то есть .:

1. обеспечить размеры графа в качестве альтернативного способа (например, атрибуты высоты данных и ширины данных) И
2. call replot() при отображении графика.

Однако в примере в документации используется для 2. имя события, которое может быть неправильным в вашей версии jquery-ui. Например, если вы используете Bootstrap 3, соответствующее событие имеет другое имя: «показано.bs.tab».

Ссылки:

• http://www.jqplot.com/deploy/dist/examples/hiddenPlotsInTabs.html
• http://getbootstrap.com/javascript/#tabs-events