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チャートライブラリGoogle Chartsの使い方

公式サイト https://developers.google.com/chart サンプルコード <html> <head> <script type="te …

no image

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

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

no image

HTMLからWindowsの設定ページを開く

ms-settings: URIスキームを用いて、HTMLのリンク先に特殊なURIを指定することで、ブラウザからWindowsの設定アプリの該当ページを開くことができます。 以下のようなHTMLコード …

no image

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

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

no image

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

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