Форум программистов
 
О проблемах, например, с регистрацией пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail, а тут можно восстановить пароль.

Вернуться   Форум программистов > Web программирование > Общие вопросы Web
Регистрация

Восстановить пароль
Повторная активизация e-mail

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Ответ
 
Опции темы
Старый 10.04.2020, 14:14   #1
Krasi
Форумчанин
 
Регистрация: 12.02.2010
Сообщений: 673
По умолчанию Не строится график внутри табов

Пробовал и с Гугл-чартами, и с Britecharts.
1. По такому скрипту работают вкладки.
Код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        
        <script type="text/javascript">
        $(document).ready(function() {
        	$("#content div").hide(); // Скрываем содержание
        	$("#tabs li:first").attr("id","current"); // Активируем первую закладку
        	$("#content div:first").fadeIn(); // Выводим содержание
            
            $('#tabs a').click(function(e) {
                e.preventDefault();        
                $("#content div").hide(); //Скрыть все сожержание
                $("#tabs li").attr("id",""); //Сброс ID
                $(this).parent().attr("id","current"); // Активируем закладку
                $('#' + $(this).attr('title')).fadeIn(); // Выводим содержание текущей закладки
            });
        });
        </script>
Вот так строится график
Код:
<div class="bar-container"></div>
        
         <script>
            // Instantiate bar chart and container
            const barChart = britecharts.bar();
            const container = d3.select('.bar-container');
        
            // Create Dataset with proper shape
            const barData = [
                { name: 'Luminous', value: 2 },
                { name: 'Glittering', value: 5 },
                { name: 'Intense', value: 4 },
                { name: 'Radiant', value: 3 }
            ];
        
            // Configure chart
            barChart
                .margin({left: 100})
                .isHorizontal(true)
                .height(400)
                .width(600);
        
            container.datum(barData).call(barChart);
        </script>
Если я помещаю код для построения графика просто перед </body>, он отлично рисуется.
Но если он находится внутри табы, то график не строится.
Код:
<ul id="tabs">
    <li><a href="#" title="tab1">Мейкер</a></li>
    <li><a href="#" title="tab2">Статистика</a></li>
    <li><a href="#" title="tab3">Заказы</a></li>
    <li><a href="#" title="tab4">Все проекты</a></li> 
    <li><a href="#" title="tab5">Пятая вкладка</a></li>
</ul>
 
<div id="content">
    <div id="tab1"><table>
            <tr>
                <td>Мультизадачность</td><td>100</td>
            </tr>
            <tr>
                <td>Скорость</td><td>50</td>
            </tr>
            <tr>
                <td>Сложность</td><td>200</td>
            </tr>
            <tr>
                <td>Дизайн</td><td>100</td>
            </tr>
        </table></div>
    <div id="tab2">
             ТО ЕСТЬ КОГДА КОД ГРАФИКА ПОМЕЩАЮ СЮДА
    </div>
Я подебажил, фишка в том, что у элемента графика остается свойство hiden.
111.png
Убираю его из дома - все ок, график строится. Как исправить?

Последний раз редактировалось Krasi; 10.04.2020 в 14:20.
Krasi вне форума Ответить с цитированием
Старый 11.04.2020, 20:30   #2
ADSoft
Старожил
 
Регистрация: 25.02.2007
Сообщений: 3,667
По умолчанию

а вот этот блок
Код:
<div class="bar-container"></div>
надеюсь он внутри <div id="tab2"> ?

Если в инспекторе display : none поменять на block - тогда нормально все?
попробуйте код размесить где то в песочнице - и дате ссылку на нее типа jsfiddle
ADSoft вне форума Ответить с цитированием
Старый 12.04.2020, 16:06   #3
Krasi
Форумчанин
 
Регистрация: 12.02.2010
Сообщений: 673
По умолчанию

Он в той вкладке, в которой и js графика! Пусть это будет tab3, в общем. Все помещено в tab3, тем более, что сама таба то не хайден, спрятан только div графика в итоге. То есть дело, скорее всего, в каком-то несовершенстве jQuery и строки
Код:
$('#' + $(this).attr('title')).fadeIn(); // Выводим содержание текущей закладки.
Идеи? Кстати, поменял div на ul - все заработало. Просто может поможете разобраться, что за ерунда с div?

Последний раз редактировалось Krasi; 12.04.2020 в 16:58.
Krasi вне форума Ответить с цитированием
Старый 13.04.2020, 19:15   #4
ADSoft
Старожил
 
Регистрация: 25.02.2007
Сообщений: 3,667
По умолчанию

Попробуйте после $('#' + $(this).attr('title')).....
Добавить
Код:
$('#' + $(this).attr('title')).children('div.bar-container').css('display', 'block');
Скорее всего скрипт графика смотрит, не в невидимой ли он диске находится, и если так стает невидимым сам.. . А потом не переключается..
ADSoft вне форума Ответить с цитированием
Ответ

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Построить график функции y=x^2. График строится из отрезков и алгоритма Брезенхема Robert_ Помощь студентам 0 20.02.2017 22:37
Не строится график alexchromets Общие вопросы Delphi 3 01.06.2012 08:12
Не строится график и не вставляется диаграмма(word)) alexchromets Общие вопросы Delphi 1 31.05.2012 20:36
Не строится график TChart sergey_dmitrievich C++ Builder 1 27.09.2011 07:40
почему медленно строится график в TChartFX? Umnik1 Компоненты Delphi 1 03.12.2008 19:18


Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru
Пеллетный котёл Emtas
котлы EMTAS
Здесь нужно купить рекламу за 7 тыс руб в месяц! )
пишите сюда - alarforum@yandex.ru
ИКС 840