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 @@
<div class="login-cont">
<label>admin456，您好！</label>
<div class="d-flex justify-content-center">
<button type="button" class="btn-wt mr-2" data-toggle="modal"
data-target="#confirmBackToCalendarMgnt" data-dismiss="modal">修改密碼</button>
<button type="button" class="btn-wt mr-2" data-toggle="modal" data-target="#confirmBackToCalendarMgnt"
data-dismiss="modal">修改密碼</button>
<button type="button" class="btn-wt mr-2" onclick="location.href='#'">登出</button>
</div>
</div>
<!-- menu 底圖 -->
......@@ -78,7 +77,10 @@
</header>
<article>
<article class="chart">
<div class="article-topic">
<img src="images/icon/icon-edu.svg"><label>教育平台管理</label>
</div>
<div class="tab-cont">
<ul class="nav-tabs nav" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
......@@ -95,22 +97,25 @@
<!-- 統計與資訊 start -->
<div class="tab-pane fade show active" id="adminMeb" role="tabpanel" aria-labelledby="adminMeb-tab">
<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">
<label>總註冊人數</label>
<label class="math">1,000人</label>
</div>
<!-- 圖表 -->
<div class="tab-pane fade show active" id="adminMeb" role="tabpanel" aria-labelledby="adminMeb-tab">
<div id="container" style="height: 600px; margin: 0" class="chart-cont">
<div class="tab-pane fade show active" id="adminMeb" role="tabpanel"
aria-labelledby="adminMeb-tab">
<div id="container" class="chart-cont">
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-12">
<div class="row HC-list">
<div class="col-12 topic">各縣市學校數量</div>
<div class="col-xl-4 col-sm-6 col-12">
<div class="col-lg-5 col-md-5 col-sm-12 col-12">
<div class="HC-list">
<div class="topic">各縣市學校數量</div>
<div class="HC-cont">
<div class="cont-city">
基隆市：25<br>
臺北市：67<br>
新北市：82<br>
......@@ -123,7 +128,7 @@
彰化縣：16<br>
雲林縣：6
</div>
<div class="col-xl-4 col-sm-6 col-12">
<div>
基隆市：25<br>
臺北市：67<br>
新北市：82<br>
......@@ -138,6 +143,32 @@
</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>
......@@ -305,22 +336,10 @@
</div>
<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 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 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>
</div>
<div class="modal-footer">
......@@ -332,8 +351,7 @@
<!-- 修改成功 -->
<div class="modal fade" id="SuccessModal" tabindex="-1" aria-labelledby="SuccessModal"
aria-hidden="true">
<div class="modal fade" id="SuccessModal" tabindex="-1" aria-labelledby="SuccessModal" aria-hidden="true">
<div class="modal-dialog success modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header whitebg">
......@@ -356,8 +374,7 @@
<!-- 修改成功 -->
<!-- 修改失敗 -->
<div class="modal fade" id="FailModal" tabindex="-1" aria-labelledby="FailModalModal"
aria-hidden="true">
<div class="modal fade" id="FailModal" tabindex="-1" aria-labelledby="FailModalModal" aria-hidden="true">
<div class="modal-dialog success modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header whitebg">
......@@ -398,10 +415,12 @@
<!-- <div class="item-bg"></div> -->
</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>
<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>
</ul>
</div>
......@@ -447,7 +466,7 @@
<script language="JavaScript">
$(document).ready(function() {
$(document).ready(function () {
var chart = {
plotBackgroundColor: null,
plotBorderWidth: null,
......@@ -459,7 +478,18 @@
text: ''
};
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 = {
pie: {
......@@ -471,9 +501,9 @@
showInLegend: false
}
};
var series= [{ //數據
var series = [{ //數據
type: 'pie',
name: 'Browser share',
name: '',
innerSize: '65%',
data: [
......@@ -508,7 +538,7 @@
$('#container').highcharts(json);
});
chart.reflowNow = function(){
chart.reflowNow = function () {
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.setSize(this.containerWidth, this.containerHeight, false);
......@@ -580,23 +610,23 @@
</script>
<script>
<script>
// 修正打開新的modal並關閉上一個modal時，modal內容高度超過螢幕時scrollbar不會出現的問題...
$(function(){
$(function () {
// 使用bootstrap modal的shown.bs.modal這個event就可以顯示scrollbar
$('.modal').on('shown.bs.modal', function () {
$('body').addClass('modal-open');
})
$(".modal [data-toggle='modal']").click(function(){
$(".modal [data-toggle='modal']").click(function () {
$(this).closest(".modal").modal('hide');
// 修正關閉新modal時，modal scrollbar位置會留下寬度17px空白的問題
$('body').css("overflow","hidden").css("padding-right","0");
$('body').css("overflow", "hidden").css("padding-right", "0");
});
});
</script>
</script>
</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