Table of Contents
サンプルコード
公式ドキュメントの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関数の引数に描画先の要素を渡すことで、その要素にこれまでに作成したチャートが描画されます。
