ニコニコ大百科:グラフ機能(折れ線グラフ)

この記事はニコニコ大百科:グラフ機能の子記事です。

概要

折れ線グラフ機能はニコニコ大百科:グラフ機能のメイン機能です。

画面/使用例

環境により表示は多少異なります。

• 本ページ及び生成されたHTMLの使用は自己責任となります。大百科運営・ページのソースコード作成者は一切の責任を負いません。

データ入力欄

0.0, 0.0
170.0,0.0
300, 80.0
500.0, -110.0

幅 

500

 px × 高さ 

300

 px

枠とx軸を表示 ✔

線分の太さ 

1

 px

変換

クリップボードにコピー

 

HTMLソース

<div><div style="border: 1px solid green; height: 150px; width: 500px;"></div><div style="border: 1px solid green; height: 150px; width: 500px;">
<div style="height: 1px; width:170px; background-color: red; transform: rotate(0deg); margin: -2px 0 0 0.0000px;"></div>
<div style="height: 1px; width:153px; background-color: red; transform: rotate(-32deg); margin: -41px 0 0 158.5000px;"></div>
<div style="height: 1px; width:276px; background-color: red; transform: rotate(44deg); margin: 54px 0 0 262.0000px;"></div>
</div></div>

使用方法

PloylineModeにより、折れ線グラフモードに入って、下記のデータ行を入力することにより折れ線グラフを描画します。

PloylineModeでのデータ行入力

1. csv形式(表計算ソフトで扱える、表でいうセルの境をカンマ( , ).で、行の要素を改行するまでの1つの文字列という形で表したもの)のデータを受け付けます。1列目がx座標、2列目が対応するy座標になります。
   • デフォルトで原点(座標軸0,0)は左辺端中央になります。
   • デフォルトで作表する大きさは横軸(x)は500ピクセル(0~500)、縦軸(y)は正負の方向に150ピクセルずつ(-150~150。計300ピクセル)です。
   • 座標の単位はピクセルですが、整数でない値も受け付けます。
   • CSVには値を引用符で囲う形式のものがありますが、引用符は使用せずに作成して下さい。
2. 上記で作成したCSVデータを「データ入力欄」に貼り付けます。
3. データ入力欄直下にある「変換」ボタンを押します。
4. ページの一番下に、座標データで設定した点と点を結ぶ形でグラフが描画されます。
5. 「クリップボードにコピー」ボタンを押してHTMLソースをクリップボードにコピーします。

詳細

• svgタグもCSSのpositionも使えないので高さ1のdivボックスとmarginを使用しています。
• データはExcelなどの表計算ソフトで原稿を作成した後、別途CSV形式で保存すると、手直しの必要が生じた時に便利です。
• 浮動小数点表記(例: 1.0e7)は受け付けないので、小数第4位までを推奨。
• 不連続グラフは不連続区間の色をtransparent(または空白文字列)にすれば可能です。
• transparentな線分(divボックス)は出力から除外されます。
• 長さや太さ0の線分は出力されますが、表示には影響しません。
• 凡例や各軸の数値などについては後述の文字列挿入機能を使用して下さい。
• 入力データにサイズ範囲外の座標を指定可能です。この時、グラフは枠線からはみ出して描画されます。
• 枠にdiv要素を使用している関係で、グラフの上縁と下縁のy座標は2-4px程度の誤差があります。

データオプション

CSVデータの3列目以降にオプションを指定できます。

3列目: 色指定

• オプションで3列目にその点を始点とする線分の色を文字列(red, #4c4c4c など)で指定できます。
• 3列目が無い時のデフォルト値はredです。
• 空文字列や空白文字列を指定すると省略ではなくtransparentを指定したとみなされます。
• ブラウザでは有効でもニコニコ大百科では使用できない色名があるので注意して下さい。
• 名前による色指定はニコニコ大百科で指定可能な色名に限られます。
• 16進数は3桁も6桁も使用可能ですが、rgb()による指定には対応していません。
• 不正な色指定はエラーになります。
• 大百科で使用可能な色の指定についてはニコニコ大百科:CSSでの色指定をご覧下さい。

4列目: 線分の太さ指定

• オプションで4列目にその点を始点とする線分の太さを指定できます。この時3列目の値は省略できません。
• 4列目がないときはデータ入力画面で指定した「線分の太さ」が使用されます。deprecated: この機能は次以降の変更で廃止される可能性があります。
• 太さは整数しか使用できません。小数点以下は四捨五入されます(ダウンロード版は処理しないので、環境によりグラフにずれが発生することがありました)。
• 線分の太さに負の値を指定できますが、正常に動作しません。
• 線を太くすると線分の継ぎ目で隙間が出来やすくなります。

5列目: 文字列挿入

• 5列目に文字列を指定すると、線分ではなく指定した文字列が挿入されます。この時3,4列目の値は省略できません。
• 4列目に指定した値は線分の太さではなくフォントサイズになります。
• 3列目に指定した色は文字色になります。
• monospaceにしたかったのですが、残念ながらニコニコ大百科はmonospaceのフォント指定を受け付けません。プロポーショナルフォントになるので、環境によって多少ずれることは計算に入れて下さい。
• 文字列を含んだdivボックスとして生成されます。線分の始点はボックスの左辺中央の座標、終点はボックスの右辺の中央の座標に相当します。
• 終点の指定が煩わしいかもしれませんが、これにより文字を任意の方向に傾けて挿入することが可能になります。
• 文字列にコンマや二重引用符含まれていてもそのまま出力されます。逆にCSV書式に準じようとして文字列を引用符で囲んだ場合は、囲むのに用いた引用符も出力されます。
• クロスサイトスクリプティング対策のため、HTMLタグや&でエスケープされた特殊文字などを埋め込もうとしても有効になりません。後で手作業で修正して下さい。これは仕様です。

その他のオプション

グラフサイズ変更

• 「幅」「高さ」の欄からグラフサイズを変更可能です。
• 値は整数のみ指定可能です。負の値も指定できますが正常に動作しません。
• 幅に負の値を指定すると、幅指定が消えて幅が親要素の幅に合うようですが、仕様に含まれない動作です。
• 「入力データ上の原点」は常に「左辺の中央」ですので、原点を変更したい場合は入力データを加工して平行移動して下さい。

枠線の表示

• デフォルトでは枠線とx軸はgreenで描画されます。
• 上記は「枠とx軸を表示」チェックボックスをオフにして消すことが出来ます。
• 枠線を消した場合でもグラフサイズ指定は有効で、後続の要素などの配置に影響します。
• 細かいですが、枠線を消すとグラフ全体を含むdiv要素の大きさが、枠線の太さ分だけ変わります。
• 枠線の色・太さなどを変更したい場合は外枠のdivボックス(y>0とy<0の2つある)を手作業で修正して下さい。
• グラフの外側にmargin等を指定したい場合は一番外のdivボックスを手作業で修正して下さい。
• 枠線のみ、x軸のみの消去は出来ません。両方共消して必要な要素をデータで描画するか、前述の外枠divボックス2つを手作業で修正して下さい。
• 左辺以外の位置にy軸が必要な場合は描画データにy軸を描画するデータを含めて下さい。

線分の太さ

• データの4列目で線分の太さを指定しない時はこの欄の値がデフォルト値として使用されます。deprecated: この機能は次以降の変更で廃止される可能性があります。
• 制約はデータの4列目と同じです。

いまいちイメージしにくい人向けの説明書き

「表計算ソフトみたいのじゃないといまいち使い方がわからん」という方はコレで使い方がイメージできるでしょうか？

	x軸	y軸	次の座標までの色指定	線の太さ(文字の大きさ)	挿入する文字列
点イ	0.0	0.0
点ロ	170.0	0.0	Blue	6
点ハ	300.0	80.0	#fff444
点ニ	500.0	-110.0	transparent
点ホ	250	0	black	12	٩( 'ω' )و
点へ	300	20

コレをCSV形式に表記すると、

0.0,0.0
170.0,0.0,blue,6
300.0,80,#fff444
500.0,-110.0,transparent
250,0 ,black,12,٩( 'ω' )و
300,20

となり、ニコニコ大百科:グラフ機能にコレを入力して「変換」ボタンを押せば

٩( 'ω' )و

という具合に作表できます。

応用編

曲線の描画

原理的には折れ線グラフを作成するツールですが単位区間を短くすれば疑似曲線も描けます。

ファイルサイズが大きくなる(点100個で13kBくらい)ので、サーバー負荷の原因や自己満足にならないよう注意して下さい。負荷については素数の一覧や後述のコッホ雪片のサンプルが参考になるかもしれません。

三角関数

2つ以上のグラフの同時表示は1つ目のグラフのデータの後ろに2つ目のグラフのデータをつけて間をtransparentにすれば可能です。

サンプルデータはこちら。

楕円曲線

線分の太さの変更と文字列挿入機能の使用例。

P

Q

R

R'

サンプルデータはこちら。

図形の描画

グラフだけでなく線で構成された任意の図形を描画可能です。

五芒星

サンプルデータはこちら。

色相環

単色の円を描きたいだけなら、ニコニコ大百科:HTMLテンプレート集の方法がきれいに描けます。

ニコニコ大百科:円グラフ機能の実装により、サンプルにはそちらを用いたものを提示することにしました。

折れ線グラフ機能を用いた旧版のサンプルデータはこちら。

コッホ雪片

枠の表示を消してサイズを変えてあります。枠を消すためにborder: noneにすると後続の要素が上にずれるので、一番外側のdivボックスにサイズを設定しています(border: transparentにすれば問題を回避できますが、大百科ではborderにtransparentを指定できません)。

データサイズが大きい(この部分だけで370kB以上ある)ので、こちらに格納しました。点が3,000個を超える割にはスムーズに表示される環境の方が多いかと思います。

サンプルデータ等はこちらから。

構造式

糖類のような奥行きを炭素結合の太さ変化で表現しないといけないケースには対応できませんが、文字を挿入する機能を実装したことにより有機化合物の構造式も記述可能。ただし、文字列内にタグは使えないので下付き文字は手作業でタグをつけています。

トリニトロトルエンを例にあげたからといって爆発的に普及するわけはない。

CH₃

NO₂

NO₂

O₂N

サンプルデータはこちら。

ロゴマーク

直線的なロゴマークなら工夫次第で描けてしまったりする。

サンプルデータはこちら。

関連項目

• ニコニコ大百科:CSSでの色指定
• ニコニコ大百科:グラフ機能