You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
151 lines
6.2 KiB
151 lines
6.2 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>梯齡</title>
|
|
<link rel="stylesheet" href="../dist/fontawesome-free/css/all.css">
|
|
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
|
|
<link rel="stylesheet" href="../dist/css/adminlte.css">
|
|
</head>
|
|
<body class="hold-transition sidebar-mini">
|
|
<!-- Main content -->
|
|
<div class="content">
|
|
<div class="container-fluid">
|
|
<div class="col-md-12">
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">梯齡統計</h3>
|
|
</div>
|
|
<!-- /.card-header -->
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<p class="d-flex flex-column"><span class="text-bold text-lg"> </span></p>
|
|
<div class="col-md-12">
|
|
<div style="display: flex;justify-content:center;align-items:center;">
|
|
<div class="chart-container" style="height:60vh; width:80vw;">
|
|
<canvas id="pieChartage"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- /.container-fluid -->
|
|
</div>
|
|
<script type="text/javascript" src="../js/jquery-2.1.1.min.js?t=2"></script>
|
|
<!-- OPTIONAL SCRIPTS -->
|
|
<script src="chart.js/Chart.js"></script>
|
|
<script>
|
|
window.onload=eleage();
|
|
function eleage(){
|
|
//梯龄 bar 图
|
|
'use strict'
|
|
var ticksStyle = {
|
|
fontColor: '#495057',
|
|
fontStyle: 'bold'
|
|
}
|
|
const urll = location.href;
|
|
const wurl = urll.split('phb')[0];
|
|
var $pieChartCanvasage = $('#pieChartage');
|
|
|
|
var URL = wurl + 'phb/da/api/screen.php?m=eleage_v2';
|
|
$.ajax({
|
|
type: "GET",
|
|
url: URL,
|
|
success: function (msg) {
|
|
var result = eval("(" + msg + ")");
|
|
console.log(result);
|
|
var data=result.data;
|
|
var labels=result.labels;
|
|
if (labels.length > 0 ) {
|
|
var eleageChart = new Chart($pieChartCanvasage, {
|
|
type: 'bar',
|
|
data: {
|
|
labels:labels,
|
|
datasets: [
|
|
{
|
|
backgroundColor: '#007bff',
|
|
borderColor: '#007bff',
|
|
label:'台數',
|
|
data: data
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
legend: {
|
|
display: true
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false,
|
|
lineWidth: '1px',
|
|
color: 'rgba(0, 0, 0, .2)',
|
|
zeroLineColor: 'transparent'
|
|
},
|
|
ticks: $.extend({
|
|
beginAtZero: true,
|
|
// Include a dollar sign in the ticks
|
|
callback: function (value) {
|
|
if (value >= 1000) {
|
|
value /= 1000
|
|
value += 'k'
|
|
}
|
|
|
|
return value
|
|
}
|
|
}, ticksStyle)
|
|
}],
|
|
xAxes: [{
|
|
display: true,
|
|
gridLines: {
|
|
display: false
|
|
},
|
|
ticks: {
|
|
beginAtZero: true
|
|
}
|
|
}]
|
|
},
|
|
animation: { // 这部分是数值显示的功能实现
|
|
onComplete: function () {
|
|
var chartInstance = this.chart,
|
|
|
|
ctx = chartInstance.ctx;
|
|
// 以下属于canvas的属性（font、fillStyle、textAlign...）
|
|
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
|
|
ctx.fillStyle = "black";
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'bottom';
|
|
|
|
this.data.datasets.forEach(function (dataset, i) {
|
|
var meta = chartInstance.controller.getDatasetMeta(i);
|
|
meta.data.forEach(function (bar, index) {
|
|
var data = dataset.data[index];
|
|
ctx.fillText(data, bar._model.x, bar._model.y - 5);
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
}
|
|
})
|
|
}else{
|
|
console.log('为空');
|
|
}
|
|
}
|
|
})
|
|
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|