Build a Dynamic Dashboard With ChartJS

Hari ini kita akan membuat sebuah dashboard dinamis dengan grafik hidup, melalui kekuatan ChartJS. ChartJS adalah kuat, ketergantungan gratis JavaScript library yang membangun grafik melalui elemen kanvas. Terbaik dari semua, itu mudah bagi desainer untuk bangun dan berjalan. Kami akan fokus pada potongan-potongan perpustakaan yang membuat Anda bangun dan berjalan dengan grafik yang indah dan fungsional cepat. Kami akan membangun dashboard ponsel-ramah dari awal sampai akhir.

Getting Started

Kita akan membangun dashboard kami di atas HTML5 Boilerplate. Download file zip, atau mengkloning repositori via Git. Kita akan nama kami direktori proyek "chartjs_dashboard", dan drop semua file langsung di sana.

<script type="text/javascript">
 # On the command line
git clone git@github.com:h5bp/html5-boilerplate.git chartjs_dashboard

Selanjutnya, kita akan ambil ChartJS. Pergi ke versi uminified di raw.github.com / nnnick / Chart.js / master / Chart.js, dan menyalin isinya ke js Anda / berkas plugins.js. Memiliki versi unminified akan membuat kesalahan lebih mudah dibaca jika Anda mengalami mereka.

Struktur file Anda akan terlihat seperti ini:

├── 404.html
├── crossdomain.xml
├── css
│   ├── main.css
│   └── normalize.css
├── favicon.ico
├── img
├── index.html
├── js
│   ├── main.js
│   ├── plugins.js
│   └── vendor
│       ├── jquery-1.10.1.min.js
│       └── modernizr-2.6.2.min.js
└── robots.txt