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

JavaScriptで値を素因数分解する

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

no image

JavaScriptでコンソールに画像を出力する

以下のurl()のカッコ内に画像のURLを指定して実行すると、コンソールにその画像を表示することができます。 console.log("%c ", ‘background: url …

no image

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

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

no image

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

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

no image

JavaScriptでバイナリからpngファイルを識別する

input要素で指定した画像がpngファイルか確認し、pngファイルだった場合にその幅と高さをコンソールに出力しています。 <html> <head> </head&gt …