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でMath.jsを用いて組み合わせの数の計算をする

math.combinations関数の第一引数に総数を、第二引数に取り出す数を渡すと、組み合わせの数が返されます。 <html> <head> <script type …

no image

画像のExif情報を読み込むJavaScriptライブラリExif.jsの使い方

Exif.jshttps://github.com/exif-js/exif-js 使い方 ここではローカルサーバーに配置したHTMLファイルから使用します。fileプロトコルでアクセスしている場合は …

no image

フレキシブルなJavaScriptチャートライブラリTauchartsの使い方

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

no image

チャートを簡単に追加できるJavaScriptライブラリChart.jsの使い方

折れ線グラフ、棒グラフ、レーダーチャート、ドーナツチャート、円グラフ、ポーラチャート、バブルチャート、散布図等のチャートをWebサイトに簡単に追加することができます。 公式サイト https://ww …

no image

File APIでinput要素で選択したファイルの情報を確認する

サンプル <input type="file"> <script> const input = document.querySelector(‘input’ …