當麻許的超技八

圖表視覺化呈現一直都很重要，畢竟，客戶就是愛看這種漂漂釀釀的東西，今天介紹一個好用的Library – Chat.js
 

當然，這網站其實非常詳細，但是，因為他的samples  有一點點小複雜，所以這邊簡單整理兩個比較常用的Line Chart 還有 Pie Chart ，我的主要目的是筆記一下，讓我之後要用到可以快速pick up 我測過的東西。

首先你都得先引入主要的 javascript 還有他處理時間的js

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>

1. Line Chart - 參考網站 : http://www.chartjs.org/docs/latest/charts/line.html

sample code :

2. Pie Chart -  參考網站: http://www.chartjs.org/docs/latest/charts/doughnut.html
sample code :



後記 : 這邊我只是很簡單的去把圖表做出來，如果你有特殊需求要改哪邊的顏色阿，標示要改變之類的，就要去官網看文件，這邊只是單純整理成好懂得code 讓你快速上手。