Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

概要

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

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

使い方

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

    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>
    
  4. 完成!

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

インスタンス化する際に第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は自動的に規定値が入ります。
ちなみに、上のコードが規定値になっています。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした