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チャートライブラリPlotly.jsでチャートを描画する

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

no image

JavaScriptでブラウザ履歴の前のページや次のページへ移動する

前のページへ window.history.back() 次のページへ window.history.forward() 指定ページ数前へ window.history.go関数の引数にマイナスの数値 …

no image

JavaScriptでコンソールにデータを表形式で表示する関数Console.table

以下のように引数にオブジェクトを渡すと、その内容を表形式でコンソールに出力することができます。 console.table(["value1", "value2& …

no image

JavaScriptでMath.jsを用いて階乗の計算をする

math.permutations関数の引数に任意の数値を渡すと、その階乗の値が返されます。また、第二引数にサブセットの値を渡すと、そこまでの計算結果が返されます。 <html> < …

no image

JavaScriptで値を素因数分解する

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