概要

d3.jsを使ってグラフ作ってくれと言われ、会社でいそいそ作ったライブラリです。
複数の項目の表示、第2軸に対応しています。

GitHub https://github.com/suntokaede/d3LineChart
Nuget https://www.nuget.org/packages/d3LineChart/

使い方

d3LineChart.js, d3LineChart.cssをDLして、作業フォルダに突っ込んでください。
表示するデータ(csv, tsv)を用意します。
ここで一列目を日付、一行目をキーになるように整形してください。
その後、同じディレクトリに突っ込んでおきます。

下をエディタにコピペして先ほどと同じディレクトリに保存します。

linechart.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
<link rel="stylesheet" type="text/css" href="d3LineChart.css">
</head>
<body>
<div id="selectWrapper"></div>
<div id="graphWrapper"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="d3LineChart.js"></script>
<script>
    // 実際の引数には用意したファイル名を入れてください
    var graph = new d3LineChart("data.csv");
</script>
</body>
</html>

完成！

もっと細かく設定したい人向けの説明

インスタンス化する際に第2引数にオブジェクトを渡すことにより、細かい設定が出来ます。

var options = {
               //  svg要素に対するグラフのマージン
               margin: { 

                       top: 20,
                       right: 30,
                       bottom: 30,
                       left: 60

              },
              //  svg要素の高さ（幅はラッパーに合わせ自動的にリサイズします）
              height: 500,  
              //  セレクタを入れる対象の要素のID
              selectWrapperId: "selectWrapper", 
              //  セレクタを入れる対象の要素のID
              graphWrapperId: "graphWrapper",
              //  csv, tsvファイルの文字コード
              charset: "Shift_JIS", 
              //  csv, tsvファイルの時間フォーマット（https://github.com/mbostock/d3/wiki/Time-Formatting）
              timeFormat: "%Y/%m/%d", 
              //  x軸の時間フォーマット
              xAxisFormat: "%m月%d日", 
              //　x軸の目盛りの数（既定では自動で計算されます）
              xAxisTicks: null, 
              //　y軸のドメイン（[最小値,最大値]のフォーマット）データがここで指定した値の外にある場合は無視されます。
              yDomainLeft: [null, null],
              yDomainRight: [null, null], 
              // マウスオーバー時のツールチップスがフェードインする時間（ミリ秒）
              mouseOverTransitionTime: 500, 
              // マウスアウト時のツールチップスがフェードアウトする時間（ミリ秒）
              mouseOutTransitionTime: 500, 
              // 凡例のアクティブな項目の背景色
              legendBackgroundColor: "#dfa", 
              //　ロケール（https://github.com/mbostock/d3/wiki/Localization）
              locale: { 
                       "decimal": ".",
                       "thousands": ",",
                       "grouping": [3],
                       "currency": ["", "円"],
                       "dateTime": "%a %b %e %X %Y",
                       "date": "%Y/%m/%d",
                       "time": "%H:%M:%S",
                       "periods": ["AM", "PM"],
                       "days": ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
                       "shortDays": ["日", "月", "火", "水", "木", "金", "土"],
                       "months": ["睦月", "如月", "弥生", "卯月", "皐月", "水無月", "文月", "葉月", "長月", "神無月", "霜月", "師走"],
                       "shortMonths": ["01月", "02月", "03月", "04月", "05月", "06月", "07月", "08月", "09月", "10月", "11月", "12月"]
              },
              // y軸右側に配置するキー （["key1", "key2"]のフォーマット）
              secondYAxisKeys: null, 
              // ツールチップ内のhtml
              tooltip: function (x, y, key) { return y + "<br/>" + x.toLocaleDateString(); }, 
              // y軸左側の項目用のパレット
              yLeftPalette: ["#1f77b4", "#5254a3", "#6b6ecf", "#6baed6", "#756bb1", "#9c9ede", "#9e9ac8", "#9ecae1", "#aec7e8", "#bcbddc", "#c6dbef", "#dadaeb"],
              // y軸右側の項目用のパレット
              yRightPalette: ["#f7b6d2", "#fd8d3c", "#fdae6b", "#fdd0a2", "#ff9896", "#e377c2", "#e6550d", "#e7969c", "#d62728", "#d6616b", "#ad494a", "#843c39"]


};
var graph = new d3LineChart(url, options);

指定しなかったkeyは自動的に規定値が入ります。
ちなみに、上のコードが規定値になっています。

ラインチャートを表示するライブラリを作った(d3.js依存)

概要

使い方

もっと細かく設定したい人向けの説明