3テラバイト

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

HTML JavaScript

D3.jsベースのJavaScriptチャートライブラリC3.jsの使い方

投稿日:

公式サイト

https://c3js.org/

サンプルコード

Getting Startedページのサンプルを動かしてみます。
https://c3js.org/gettingstarted.html

<html>
  <head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>
  </head>
  <body>
    <div id="chart"></div>
    <script>
var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
});
    </script>
  </body>
</html>

必要なjs, cssファイルを読み込み(3~5行目)

ここではライブラリをCDNのcdnjsから読み込みます。
C3.jsのjs, cssファイルのほか、このライブラリはD3.jsベースのため、d3.jsの読み込みも必要です。

ファイルをダウンロードして使用する場合は以下のリンクから最新版のC3.jsのダウンロードが可能です。
https://github.com/c3js/c3/releases/latest

依存関係については、C3.jsのv0.5.0でD3.jsのv4に、C3.jsのv0.6.0でD3.jsのv5に更新されています。

チャートを描画する要素を用意(8行目)

チャートを描画するためのdiv要素を用意、取得するためのIDも設定しておきます。

チャートを生成(10~18行目)

c3.generate関数にチャートの設定値を格納したオブジェクトを渡し、チャートを生成します。

bindtoにはチャートを描画する要素を指定します。
ここではIDがchartの要素に描画するため、’chart’を指定しています。

dataにチャートのデータを設定しています。
columnsに線ごとの値を指定しています。

依存ライブラリ

D3.js
https://d3js.org/

-HTML, JavaScript


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

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

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

no image

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

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

no image

JavaScriptで値を素因数分解する

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

no image

カルーセルを実装するjQueryプラグインslickの使い方

こんにちは、今日はカルーセルを実行できるjQueryプラグイン、slickの使い方についてまとめていきます。 公式サイト https://kenwheeler.github.io/slick/ ダウン …

no image

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

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