Table of Contents
公式サイト
http://gionkunz.github.io/chartist-js/index.html
GETTING STARTED
http://gionkunz.github.io/chartist-js/getting-started.html
コードサンプル
折れ線グラフ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <link rel= "stylesheet" href= "https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" > <script src= "https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js" ></script> </head> <body> <div class = "ct-chart ct-perfect-fourth" ></div> <script> var data = { labels: [ 'Mon' , 'Tue' , 'Wed' , 'Thu' , 'Fri' ], series: [ [5, 2, 4, 2, 0] ] }; new Chartist.Line( '.ct-chart' , data); </script> </body> </html> |
CDN
3,4行目ではライブラリのcssとjsファイルをCDNから読み込んでいます。
チャートを描画する要素を追加
8行目ではチャートの描画を行うdiv要素を用意しています。
指定しているclass名のct-chartは16行目でチャートのオブジェクトを作成する際にコンストラクタに渡します。
もう一つのct-perfect-fourthはチャートのアスクペクト比を指定するクラスで、GETTING STARTEDページに使用できる値が記載されています。
ct-perfect-fourthはアスペクト比が3:4になります。
チャートの値を設定
10行目に定義している変数dataにはチャートの値を指定しています。
labelsには横軸に表示するラベルを、seriesには数値を指定します。
チャートのオブジェクト生成
16行目ではチャートのオブジェクトを生成しており、これでチャートの表示が行われます。
第一引数には8行目で用意したチャートを描画するためのdiv要素を探すためのクラス名を、第二引数には10行目で定義したチャートの設定値を格納したオブジェクトを渡します。