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ライブラリChart.jsの使い方

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

no image

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

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

no image

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

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

no image

JavaScriptチャートライブラリPlotly.jsでチャートを描画する

公式サイト Plotly JavaScript Graphing Library | JavaScript | Plotlyhttps://plotly.com/javascript/ サンプルコード …

no image

JavaScriptで値が素数か判定する

以下のコードでは、渡された値が素数か判定する関数isPrimeNumberを定義しています。 Number.isIntegerで引数が整数か判定し、その後1から引数で渡された値の範囲で引数の値を割って …