chart.js 圖表工具

chart.js是一個很容易操作的圖表工具,只要設定好參數,就可以在頁面呈現漂漂亮亮的圖表

先載入Chart.js
CDN : https://cdnjs.com/libraries/Chart.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js" integrity="undefined" crossorigin="anonymous"></script>

在要顯示圖表的位置加入 <canvas> 標籤

<canvas id="myChart1" ></canvas>

設定圖表

<script>
var ctx = document.getElementById('myChart1').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bar',  // 圖表類別 bar:柱狀 line:曲線 pie:圓餅
    data: {
        labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'], //X軸
        datasets: [{
            label: '資料1', // 資料名稱
            backgroundColor: 'rgb(255, 99, 132)', // 顏色
            borderColor: 'rgb(255, 99, 132)',     // 邊框顏色
            data: [1, 10, 5, 2, 20, 30, 45]       // 資料
        }]
    },

    options: {}
});
</script>

設定好就會出現圖表

如果要多筆資料:

var ctx2 = document.getElementById('myChart2').getContext('2d');
var chart = new Chart(ctx2, {
    type: 'bar',

    data: {
        labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
        datasets: [{
            label: '資料1',
            borderWidth : 1,
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(245, 89, 122)',
            data: [10, 10, 5, 2, 20, 30, 45]
        },{
            label: '資料2',
            borderWidth : 1,
            backgroundColor: 'rgb(255, 199, 132)',
            borderColor: 'rgb(225, 169, 122)',
            data: [ 45,10,30,10, 5, 2, 20]
        }]
    },

    // Configuration options go here
    options: {}
});

調整大小

<div class="chart-container" style="position: relative; height:50%; width:50%" >
<canvas id="myChart1" ></canvas>
</div>

chart.js官網:https://www.chartjs.org/docs/latest/
各種圖表範本:https://www.chartjs.org/samples/latest/

Debian更改時區設定

切換到etc目錄

 # cd /etc

將原本localtime 更名為 localtime.o

 # mv localtime localtime.o

套用台北時區設定檔

 # ln -s /usr/share/zoneinfo/Asia/Taipei localtime

安裝校時軟體

 # apt-get install ntpdate

更新系統時間

 # ntpdate time.stdtime.gov.tw

確認時間是否正常

 # date
 Wed Nov 20 11:42:45 CST 2019

[PHP]日期時間轉換

取得今天日期

$today = date('Y-m-d');
echo $today.PHP_EOL;

取得今天日期 ( 時分秒 )

$now = date('Y-m-d H:i:s');
echo $now.PHP_EOL;

取得明天日期

$tomorrow = date('Y-m-d',strtotime('+1day'));
echo $tomorrow.PHP_EOL;

加1年1月1日後的日期

$someday= date('Y-m-d',strtotime('+1year +1month +1day'));
echo $someday.PHP_EOL;

也可以加年月日等計算

+1year:年
+1month:月
+1week:週
+1day:天
+1hour:小時
+1minute:分鐘
+1second:秒

特定時間計算

$date = "2019-01-01"; //特定時間
$newdate = date('Y-m-d',strtotime("$date +1month"));
echo $newdate.PHP_EOL;

Y-m-d 參數請參考PHP手冊:https://www.php.net/manual/en/function.date.php

[PHP]時區設定

台灣時區為+8小時,但PHP預設是+0小時
當現在now()應該取得時間為 18:00(GMT+8),但是輸出變成10:00(GMT+10)時
就是時區設定錯誤了,這時要記得修改時區

在PHP的設定檔 ( php.ini ) 找到時區設定

 [Date]
 ; Defines the default timezone used by the date functions
 ; http://php.net/date.timezone
 ;date.timezone = 

更改為(記得移除前面分號)

date.timezone = "Asia/Taipei"

儲存設定後重啟服務就可以了

[PHP]計算2個日期之間有幾天

物件( Object oriented style ):

<?php
$datetime1 = new DateTime('2019-01-01');
$datetime2 = new DateTime('2019-01-31');
$interval = $datetime1->diff($datetime2);
echo $interval->format('%R%a days');
?>

// +30 days

程序式 ( Procedural style ) :

<?php
$datetime1 = date_create('2019-01-01');
$datetime2 = date_create('2019-01-31');
$interval = date_diff($datetime1, $datetime2);
echo $interval->format('%R%a days');
?>
// +30 days

$interval->format 輸出格式說明:https://www.php.net/manual/en/dateinterval.format.php

透過迴圈來跑2個日期之間

$fristday = '2019-01-01';
$lastday = '2019-01-31';
$datetime1 = date_create($fristday);
$datetime2 = date_create($lastday);
$interval = date_diff($datetime1, $datetime2);
$godays = $interval->format('%a');
for ($i = 0; $i <= $godays; $i++) {
     $theday = date("Y-m-d",strtotime($fristday." +$i day")); 
     echo $theday.PHP_EOL;
 } 

輸出結果如下:

 2019-01-01
 2019-01-02
 2019-01-03
 2019-01-04
 2019-01-05
 2019-01-06
 2019-01-07
 2019-01-08
 2019-01-09
 2019-01-10
 2019-01-11
 2019-01-12
 2019-01-13
 2019-01-14
 2019-01-15
 2019-01-16
 2019-01-17
 2019-01-18
 2019-01-19
 2019-01-20
 2019-01-21
 2019-01-22
 2019-01-23
 2019-01-24
 2019-01-25
 2019-01-26
 2019-01-27
 2019-01-28
 2019-01-29
 2019-01-30
 2019-01-31