3テラバイト

プログラム関連備忘録サイト。主にゲーム。

HTML JavaScript

シンプルなレスポンシブチャートJavaScriptライブラリChartist.jsの使い方

投稿日:

公式サイト

http://gionkunz.github.io/chartist-js/index.html

GETTING STARTED
http://gionkunz.github.io/chartist-js/getting-started.html

コードサンプル

折れ線グラフ

<!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行目で定義したチャートの設定値を格納したオブジェクトを渡します。

-HTML, JavaScript


comment

メールアドレスが公開されることはありません。

関連記事

no image

JavaScriptで値を素因数分解する

以下のコードでは、渡された値を素因数分解して文字列で結果を返す関数primeFactorizationを定義しています。 function primeFactorization(value) { va …

no image

JavaScriptで処理時間を計測する

performance.now関数を用いて処理時間を計測します。計測したい処理の実行前後にperformance.now関数でtime originからの経過時間を取得し、その差を比較します。 DOM …

no image

input要素で選択したファイルのバイナリデータをFile APIで表示する

サンプルコード input要素で選択したファイルのバイナリデータを16進数表記でpre要素に出力します。 <input type="file"> <pre> …

no image

JavaScriptでコンソールに画像を出力する

以下のurl()のカッコ内に画像のURLを指定して実行すると、コンソールにその画像を表示することができます。 console.log("%c ", ‘background: url …

no image

JavaScriptで数値を2進数や16進数の文字列に変換する

toString関数の引数に基数の値を指定すると、その形式に変換された文字列が返されます。基数は2~36までの間で指定可能です。 16進数に変換する この例では30を16進数に変換した1eが出力されま …