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チャートライブラリTauchartsの使い方

サンプルコード 公式ドキュメントのTutorialsの内、簡易的なものを実際に動かしてみます。https://api.taucharts.com/tutorials/1min.html <htm …

no image

タッチジェスチャーを実装するJavaScriptライブラリHammer.jsの使い方

こんにちは、今日はWebサイトにタッチジェスチャーを実装することができるJavaScriptライブラリ、Hammer.jsの使い方についてまとめていきます。 イベントの設定方法 通常のJavaScri …

no image

JavaScriptで配列やオブジェクトの一部を代入する分割代入

JavaScriptで変数に配列やオブジェクトから値を代入する際に、左辺の変数名に角括弧[]を付けることで配列やオブジェクトの一部のみ代入することが可能です。 以下の例では変数aに右辺の配列の内最初の …

no image

動画を埋め込むHTML要素<video>の使い方

動画を埋め込む 以下のようにsrc属性に埋め込みたい動画のURLを指定することで動画を埋め込むことができます。 <video src="movie.mp4"></ …

no image

ブラウザのコンソールからページ内の画像リストを確認する

ブラウザのコンソールにdocument.imagesの内容を出力すると、現在の文書内にある画像のリストが返され、任意の要素をクリックでその画像を確認することができます。 console.log(doc …