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.
231 lines
9.8 KiB
231 lines
9.8 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="row">
|
|
<div class="col-lg-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">區域</h3>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div>
|
|
<p class="d-flex flex-column">
|
|
<span class="text-bold text-md">總台數<i id="taisum"></i></span>
|
|
</p>
|
|
</div>
|
|
<div style="display: flex;justify-content:center;align-items:center;">
|
|
<div class="chart-container" style="height:60vh; width:80vw;">
|
|
<canvas id="sales-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- OPTIONAL SCRIPTS -->
|
|
<script type="text/javascript" src="../js/jquery-2.1.1.min.js?t=2"></script>
|
|
<script src="chart.js/Chart.js"></script>
|
|
<script>
|
|
window.onload=area();
|
|
function area(){
|
|
//���g bar�D
|
|
'use strict'
|
|
var ticksStyle = {
|
|
fontColor: '#495057',
|
|
fontStyle: 'bold'
|
|
}
|
|
var mode = 'nearest'
|
|
var intersect = false
|
|
const urll = location.href;
|
|
const wurl = urll.split('phb')[0];
|
|
var salesChart = $('#sales-chart')
|
|
var URLAREA = wurl + 'phb/da/api/screen.php?m=area_v2';
|
|
//$('#taisum').html(28);
|
|
// var eleageChart = new Chart( salesChart, {
|
|
// type: 'bar',
|
|
// data: {
|
|
// // labels:labels,
|
|
// labels: ['�^��', '�f�A', '��ˮ', '�҈@', '���f', '����', '�µ�','���m'],
|
|
// datasets: [
|
|
// {
|
|
// backgroundColor: '#007bff',
|
|
// borderColor: '#007bff',
|
|
// label:'̨��',
|
|
// //
|
|
// data: [1,1,1,2,4,11,5,3]
|
|
// }
|
|
// ]
|
|
// },
|
|
// 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: { // �@�����ǔ�ֵ�@ʾ�Ĺ��܌��F
|
|
// 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);
|
|
// });
|
|
// });
|
|
// }
|
|
// }
|
|
//
|
|
// }
|
|
// })
|
|
$.ajax({
|
|
type: "GET",
|
|
url: URLAREA,
|
|
success: function (msg) {
|
|
var result = eval("(" + msg + ")");
|
|
console.log(result);
|
|
var data=result.data;
|
|
var labels=result.labels;
|
|
var taisum=result.taisum;
|
|
$('#taisum').html(taisum);
|
|
if (labels.length > 0 ) {
|
|
var eleageChart = new Chart( salesChart, {
|
|
type: 'bar',
|
|
data: {
|
|
labels:labels,
|
|
// labels: ['�^��', '�f�A', '��ˮ', '�҈@', '���f', '����', '�µ�','���m'],
|
|
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: { // �@�����ǔ�ֵ�@ʾ�Ĺ��܌��F
|
|
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>
|
|
|