我正在尝试使用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 -->
控制台日志会抛出以下内容:
[错误]错误:图的尺寸无效,宽度= null,高度= 空调整大小(jquery.flot.js:135:94)画布(jquery.flot.js:114) setupCanvases(jquery.flot.js:1313)图(jquery.flot.js:707)图 (jquery.flot.js:3146)initRealTimeChart(index.js:20)(匿名 函数)(index.js:12)我(jquery.min.js:2:27455)fireWith (jquery.min.js:2:28215)准备就绪(jquery.min.js:2:30018)K (jquery.min.js:2:30374)
对初学者有什么提示吗?