3テラバイト

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

HTML JavaScript

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

投稿日:

サンプルコード

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

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/d3@4.13.0/build/d3.min.js" charset="utf-8"></script>
    <script src="https://cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.css">
  </head>
  <body>
    <div id='line'></div>
    <script>
var datasource = [{
  type:'us', count:20, date:'12-2013'
},{
  type:'us', count:10, date:'01-2014'
},{
  type:'bug', count:15, date:'02-2014'
},{
  type:'bug', count:23, date:'05-2014'
}];
var chart = new Taucharts.Chart({
    data: datasource,
    type: 'line',
    x: 'date',
    y: 'count',
    color: 'type'
});
chart.renderTo(document.getElementById('line'));
    </script>
  </body>
</html>

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

    <script src="https://cdn.jsdelivr.net/npm/d3@4.13.0/build/d3.min.js" charset="utf-8"></script>
    <script src="https://cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.css">

ここではライブラリをCDNから読み込みます。

Tauchartsのjs, cssファイルのほか、このライブラリではd3.jsの読み込みも必要です。

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

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

チャートのデータを設定(10~18行目)

datasource変数にチャートのデータを設定しています。

オブジェクトの配列を渡し、各オブジェクトがチャート上のそれぞれの点になります。

オブジェクトのキーの命名については任意ですが、
ここでは線の種類を判別するためのtype、横軸の値に使用するためのdate、縦軸の値に使用するためのcountを指定しています。

チャートを作成(19~25行目)

ここではチャートを作成しています。

dataには先ほどのdatasource変数を渡し、
typeには折れ線グラフを表示するためlineを指定。
xにはx軸に表示するキー、yにはy軸に表示するキー、colorには線の種類を判別するキーを指定しています。

チャートを描画(26行目)

renderTo関数の引数に描画先の要素を渡すことで、その要素にこれまでに作成したチャートが描画されます。

-HTML, JavaScript


comment

メールアドレスが公開されることはありません。

関連記事

no image

HTML – svgタグで図形を描画する

サンプルコード <!DOCTYPE html> <html> <head> </head> <body> <svg width=&qu …

no image

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

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

no image

JavaScriptで指定時間ごとに処理を実行する

指定時間ごとに処理を実行する setInterval関数の第一引数に指定時間経過ごとに実行したいコールバック関数を、第二引数に待機時間をミリ秒で指定します。 以下の例では関数callbackFuncを …

no image

グリッドレイアウトを実装するJavaScriptライブラリMasonryの使い方

こんにちは、今日はWebサイトにグリッドレイアウトを実装することができるJavaScriptライブラリ、Masonryの使い方についてまとめていきます。 公式サイト https://masonry.d …

no image

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

ブラウザのコンソールにdocument.embedsの内容を出力すると、現在の文書内にある埋め込みのリストが返されます。 console.log(document.embeds)