Sparkline в AdminBSB выбрасывает неверные размеры - PullRequest
Новая
       11

Sparkline в AdminBSB выбрасывает неверные размеры

0 голосов
/ 31 января 2019

Я пытаюсь реализовать панель мониторинга с использованием AdminBSB, но я впервые использую HTML и JavaScript.

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

<!-- CPU Usage -->
            <div class="row clearfix">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="card">
                        <div class="header">
                            <div class="row clearfix">
                                <div class="col-xs-12 col-sm-6">
                                    <h2>CPU USAGE (%)</h2>
                                </div>
                                <div class="col-xs-12 col-sm-6 align-right">
                                    <div class="switch panel-switch-btn">
                                        <span class="m-r-10 font-12">REAL TIME</span>
                                        <label>OFF<input type="checkbox" id="realtime" checked><span class="lever switch-col-cyan"></span>ON</label>
                                    </div>
                                </div>
                            </div>
                            <ul class="header-dropdown m-r--5">
                                <li class="dropdown">
                                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                        <i class="material-icons">more_vert</i>
                                    </a>
                                    <ul class="dropdown-menu pull-right">
                                        <li><a href="javascript:void(0);">Action</a></li>
                                        <li><a href="javascript:void(0);">Another action</a></li>
                                        <li><a href="javascript:void(0);">Something else here</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div> 
                        <!-- <div class="body">
                            <div id="real_time_chart" class="dashboard-flot-chart"></div>
                        </div> -->
                    </div>
                </div>
            </div>
            <!-- #END# CPU Usage -->
            <div class="row clearfix">
                <!-- Visitors -->
                <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                    <div class="card">
                        <div class="body bg-pink">
                            <div class="sparkline" data-type="line" data-spot-Radius="4" data-highlight-Spot-Color="rgb(233, 30, 99)" data-highlight-Line-Color="#fff"
                                 data-min-Spot-Color="rgb(255,255,255)" data-max-Spot-Color="rgb(255,255,255)" data-spot-Color="rgb(255,255,255)"
                                 data-offset="90" data-width="100%" data-height="92px" data-line-Width="2" data-line-Color="rgba(255,255,255,0.7)"
                                 data-fill-Color="rgba(0, 188, 212, 0)">
                                12,10,9,6,5,6,10,5,7,5,12,13,7,12,11
                            </div>
                            <ul class="dashboard-stat-list">
                                <li>
                                    TODAY
                                    <span class="pull-right"><b>1 200</b> <small>USERS</small></span>
                                </li>
                                <li>
                                    YESTERDAY
                                    <span class="pull-right"><b>3 872</b> <small>USERS</small></span>
                                </li>
                                <li>
                                    LAST WEEK
                                    <span class="pull-right"><b>26 582</b> <small>USERS</small></span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- #END# Visitors -->

Журнал консоли выдает следующее:

[Ошибка] Ошибка: неверные размеры для графика, ширина = ноль, высота = ноль, изменение размера (jquery.flot.js: 135: 94) Canvas (jquery.flot.js: 114) setupCanvases (jquery.flot.js: 1313) Plot (jquery.flot.js: 707) plot (jquery.flot.js: 3146) initRealTimeChart (index.js: 20) (анонимная функция) (index.js: 12) i (jquery.min.js: 2: 27455) fireWith (jquery.min.js: 2: 28215) готов (jquery.min.js: 2: 30018) K (jquery.min.js: 2: 30374)

Есть советы для новичка?

...