라인 차트를 표시하는 라이브러리를 만들었다 (d3.js 의존)
개요
d3.js를 사용하여 그래프를 만들어 달라고 부르며 회사에서 자꾸 만든 라이브러리입니다.
복수의 항목의 표시, 제2축에 대응하고 있습니다.
GitHub htps : // 기주 b. 코 m / 신토 카에데 / d3
Nuget htps //w w. 젖꼭지 t. 오 rg / pa c 게 s / d3
사용법
d3LineChart.js , d3LineChart.css
여기서 첫 번째 열을 날짜로, 첫 번째 줄을 키로 만들 수 있습니다.
그런 다음 같은 디렉토리에 넣어 둡니다.
아래를 편집기에 복사하여 이전과 같은 디렉토리에 저장합니다.
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>
더 세밀하게 설정하고 싶은 사람을 위한 설명
인스턴스화 할 때 두 번째 인수에 객체를 전달하여 세부 설정을 할 수 있습니다.
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);
지정하지 않은 키는 자동으로 규정값이 들어갑니다.
덧붙여서, 위의 코드가 규정치가 되어 있습니다.
Reference
이 문제에 관하여(라인 차트를 표시하는 라이브러리를 만들었다 (d3.js 의존)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/suntokaede/items/daa22f466fe62bc8ec97
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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);
Reference
이 문제에 관하여(라인 차트를 표시하는 라이브러리를 만들었다 (d3.js 의존)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/suntokaede/items/daa22f466fe62bc8ec97텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
