Skip to content

H
HRM-admin
Commit a6e5ef9a authored by FionaChen's avatar FionaChen
Browse files
Options

圖表修正

parent b82a145f
Show whitespace changes
Inline Side-by-side
Showing with 192 additions and 162 deletions
edu-manage.html
View file @ a6e5ef9a
...@@ -64,11 +64,10 @@ ...@@ -64,11 +64,10 @@
<div class="login-cont"> <div class="login-cont">
<label>admin456，您好！</label> <label>admin456，您好！</label>
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<button type="button" class="btn-wt mr-2" data-toggle="modal" <button type="button" class="btn-wt mr-2" data-toggle="modal" data-target="#confirmBackToCalendarMgnt"
data-target="#confirmBackToCalendarMgnt" data-dismiss="modal">修改密碼</button> data-dismiss="modal">修改密碼</button>
<button type="button" class="btn-wt mr-2" onclick="location.href='#'">登出</button> <button type="button" class="btn-wt mr-2" onclick="location.href='#'">登出</button>
</div> </div>
</div> </div>
<!-- menu 底圖 --> <!-- menu 底圖 -->
...@@ -78,7 +77,10 @@ ...@@ -78,7 +77,10 @@
</header> </header>
<article> <article class="chart">
<div class="article-topic">
<img src="images/icon/icon-edu.svg"><label>教育平台管理</label>
</div>
<div class="tab-cont"> <div class="tab-cont">
<ul class="nav-tabs nav" id="myTab" role="tablist"> <ul class="nav-tabs nav" id="myTab" role="tablist">
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
...@@ -95,22 +97,25 @@ ...@@ -95,22 +97,25 @@
<!-- 統計與資訊 start --> <!-- 統計與資訊 start -->
<div class="tab-pane fade show active" id="adminMeb" role="tabpanel" aria-labelledby="adminMeb-tab"> <div class="tab-pane fade show active" id="adminMeb" role="tabpanel" aria-labelledby="adminMeb-tab">
<div class="row HC-area"> <div class="row HC-area">
<div class="col-md-8 col-sm-12 col-12">
<div class="col-lg-7 col-md-7 col-sm-12 col-12">
<div class="chart-topic"> <div class="chart-topic">
<label>總註冊人數</label> <label>總註冊人數</label>
<label class="math">1,000人</label> <label class="math">1,000人</label>
</div> </div>
<!-- 圖表 --> <!-- 圖表 -->
<div class="tab-pane fade show active" id="adminMeb" role="tabpanel" aria-labelledby="adminMeb-tab"> <div class="tab-pane fade show active" id="adminMeb" role="tabpanel"
<div id="container" style="height: 600px; margin: 0" class="chart-cont"> aria-labelledby="adminMeb-tab">
<div id="container" class="chart-cont">
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4 col-sm-12 col-12"> <div class="col-lg-5 col-md-5 col-sm-12 col-12">
<div class="row HC-list"> <div class="HC-list">
<div class="col-12 topic">各縣市學校數量</div> <div class="topic">各縣市學校數量</div>
<div class="col-xl-4 col-sm-6 col-12"> <div class="HC-cont">
<div class="cont-city">
基隆市：25<br> 基隆市：25<br>
臺北市：67<br> 臺北市：67<br>
新北市：82<br> 新北市：82<br>
...@@ -123,7 +128,7 @@ ...@@ -123,7 +128,7 @@
彰化縣：16<br> 彰化縣：16<br>
雲林縣：6 雲林縣：6
</div> </div>
<div class="col-xl-4 col-sm-6 col-12"> <div>
基隆市：25<br> 基隆市：25<br>
臺北市：67<br> 臺北市：67<br>
新北市：82<br> 新北市：82<br>
...@@ -138,6 +143,32 @@ ...@@ -138,6 +143,32 @@
</div> </div>
</div> </div>
<div class="fam-order">
<div class="d-flex justify-content-start">
<lable class="title">家長訂閱方式統計</lable>
</div>
<div class="row mt-2 fam-cont">
<div class="order-cont col-lg-4 col-md-6 col-sm-3 col-12">
<img src="images/icon/icon-atm.jpg">
<label>ATM</label>
<label>70人</label>
</div>
<div class="order-cont col-lg-4 col-md-6 col-sm-3 col-12">
<img src="images/icon/icon-atm.jpg">
<label>信用卡</label>
<label>70人</label>
</div>
<div class="order-cont col-lg-4 col-md-6 col-sm-3 col-12">
<img src="images/icon/icon-atm.jpg">
<label>Apple pay</label>
<label>70人</label>
</div>
</div>
</div>
</div>
</div> </div>
...@@ -305,22 +336,10 @@ ...@@ -305,22 +336,10 @@
</div> </div>
<div class="d-flex justify-content-center mt-5"> <div class="d-flex justify-content-center mt-5">
<button type="button" class="btn btn-wt mr-3" data-dismiss="modal">取消</button> <button type="button" class="btn btn-wt mr-3" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-wt blue" data-toggle="modal" data-dismiss="modal" data-target="#SuccessModal">確認</button> <button type="button" class="btn btn-wt blue" data-toggle="modal" data-dismiss="modal"
data-target="#SuccessModal">確認</button>
</div> </div>
<!-- <div class="message-group">
<label>舊密碼</label>
<div class="col-12 col-noPadding text-center">
<p>是否返回？</p>
<div class="submitBlock">
<div class="d-flex justify-content-around">
<button type="button" class="btn btn-wt" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-wt blue" onclick="window.location.href='">確認</button>
</div>
</div>
</div>
</div> -->
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
...@@ -332,8 +351,7 @@ ...@@ -332,8 +351,7 @@
<!-- 修改成功 --> <!-- 修改成功 -->
<div class="modal fade" id="SuccessModal" tabindex="-1" aria-labelledby="SuccessModal" <div class="modal fade" id="SuccessModal" tabindex="-1" aria-labelledby="SuccessModal" aria-hidden="true">
aria-hidden="true">
<div class="modal-dialog success modal-dialog-centered" role="document"> <div class="modal-dialog success modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header whitebg"> <div class="modal-header whitebg">
...@@ -356,8 +374,7 @@ ...@@ -356,8 +374,7 @@
<!-- 修改成功 --> <!-- 修改成功 -->
<!-- 修改失敗 --> <!-- 修改失敗 -->
<div class="modal fade" id="FailModal" tabindex="-1" aria-labelledby="FailModalModal" <div class="modal fade" id="FailModal" tabindex="-1" aria-labelledby="FailModalModal" aria-hidden="true">
aria-hidden="true">
<div class="modal-dialog success modal-dialog-centered" role="document"> <div class="modal-dialog success modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header whitebg"> <div class="modal-header whitebg">
...@@ -398,10 +415,12 @@ ...@@ -398,10 +415,12 @@
<!-- <div class="item-bg"></div> --> <!-- <div class="item-bg"></div> -->
</li> </li>
<li> <li>
<a href="edu-manage.html" class="items active"><img src="images/icon/side-HRM.svg">教育平台管理</a> <a href="edu-manage.html" class="items active"><img
src="images/icon/side-HRM.svg">教育平台管理</a>
</li> </li>
<li> <li>
<a href="HRMS-manage.html" class="items"><img src="images/icon/side-member.svg">HRMS管理</a> <a href="HRMS-manage.html" class="items"><img
src="images/icon/side-member.svg">HRMS管理</a>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -447,7 +466,7 @@ ...@@ -447,7 +466,7 @@
<script language="JavaScript"> <script language="JavaScript">
$(document).ready(function() { $(document).ready(function () {
var chart = { var chart = {
plotBackgroundColor: null, plotBackgroundColor: null,
plotBorderWidth: null, plotBorderWidth: null,
...@@ -459,7 +478,18 @@ ...@@ -459,7 +478,18 @@
text: '' text: ''
}; };
var tooltip = { var tooltip = {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' backgroundColor: 'rgba(53, 169, 255, 1)',
borderColor: 'rgba(53, 169, 255, 1)',
headerFormat: '<span style="font-size: 24px">{point.key}</span><br/>',
style: { // 文字內容相關樣式
color: '#fff',
fontSize: '24px',
fontWeight: 'blod',
},
pointFormat: '{point.key} <b>{point.percentage:.1f}%</b>'
// pointFormat: '{series.name}<b>{point.percentage:.1f}%</b>'
}; };
var plotOptions = { var plotOptions = {
pie: { pie: {
...@@ -471,9 +501,9 @@ ...@@ -471,9 +501,9 @@
showInLegend: false showInLegend: false
} }
}; };
var series= [{ //數據 var series = [{ //數據
type: 'pie', type: 'pie',
name: 'Browser share', name: '',
innerSize: '65%', innerSize: '65%',
data: [ data: [
...@@ -508,7 +538,7 @@ ...@@ -508,7 +538,7 @@
$('#container').highcharts(json); $('#container').highcharts(json);
}); });
chart.reflowNow = function(){ chart.reflowNow = function () {
this.containerHeight = this.options.chart.height || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'height'); this.containerHeight = this.options.chart.height || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'height');
this.containerWidth = this.options.chart.width || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'width'); this.containerWidth = this.options.chart.width || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'width');
this.setSize(this.containerWidth, this.containerHeight, false); this.setSize(this.containerWidth, this.containerHeight, false);
...@@ -580,23 +610,23 @@ ...@@ -580,23 +610,23 @@
</script> </script>
<script> <script>
// 修正打開新的modal並關閉上一個modal時，modal內容高度超過螢幕時scrollbar不會出現的問題... // 修正打開新的modal並關閉上一個modal時，modal內容高度超過螢幕時scrollbar不會出現的問題...
$(function(){ $(function () {
// 使用bootstrap modal的shown.bs.modal這個event就可以顯示scrollbar // 使用bootstrap modal的shown.bs.modal這個event就可以顯示scrollbar
$('.modal').on('shown.bs.modal', function () { $('.modal').on('shown.bs.modal', function () {
$('body').addClass('modal-open'); $('body').addClass('modal-open');
}) })
$(".modal [data-toggle='modal']").click(function(){ $(".modal [data-toggle='modal']").click(function () {
$(this).closest(".modal").modal('hide'); $(this).closest(".modal").modal('hide');
// 修正關閉新modal時，modal scrollbar位置會留下寬度17px空白的問題 // 修正關閉新modal時，modal scrollbar位置會留下寬度17px空白的問題
$('body').css("overflow","hidden").css("padding-right","0"); $('body').css("overflow", "hidden").css("padding-right", "0");
}); });
}); });
</script> </script>
</body> </body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment