ニコニコ大百科:グラフ機能(コマンド解説)

ニコニコ大百科:グラフ機能(コマンド解説)は、ニコニコ大百科:グラフ機能の子記事です。

目次

作成中

親記事の目次に戻る

• モードについて
• 座標系
• 色指定
• モードコマンド
  
  • PolylineMode
  • PieChartMode
• コンフィグコマンド
  
  • field
  • xAxis, yAxis
  • noSource
• コメント行
• 詳細

概要

当記事では「データ入力欄」の記述方法の解説を行います。

モード

データ入力には以下の3つのモードが存在します。

• PolylineMode: 折れ線グラフ描画モード
• PieChartMode: 円グラフ描画モード
• モードなし: 非モードコマンドを入力するモード

入力データの形式

• 入力データはCSV(Comma Separated Values)形式になります。
• CSVには値を引用符で囲う形式のものがありますが、引用符で囲まないCSV形式として解釈されます。
• テキストを入力するところでは引用符はテキストの一部として解釈されます。

入力データの分類

「データ入力欄」にはコマンド行とデータ行(及びコメント行)が入力できます。

• コマンド行
  
  • モードコマンド: モードを切り替えます。
  • 非モードコマンド(コンフィグコマンド)
• データ行: 各モードにおけるデータを入力します。
• コメント行: 解釈時には無視されます。

モードコマンド行で描画モードを指定し、データ行のデータを使って描画するというのが大まかな流れです。

コマンド行とデータ行の区別について

CSV行データの先頭が特定の文字列であるものはコマンド行(及びコメント行)として解釈されます。描画モード中は、先頭が数字であるものはデータ行として扱われます。

上記で解釈できないものはエラーになります。

入力データの解釈とモード切り替え

入力データは上の行から逐次解釈され、モードコマンドに遭遇したらモードが切り替わります。モードの初期値はPolylineModeです。

PolylineModeまたはPieChartModeに入ると、以降の行は次のコマンド行に遭遇するまで切り替わったモードにおけるデータ行として解釈されます。

非モードコマンドに遭遇したら、モード指定は解除され、モードなしに切り替わります。

コメント行はモードによらず、存在しないものとして扱われます。

座標系

入力データにおける座標系の初期状態は以下の通りです。

• 直交座標系で原点は左辺中央になります。
• デフォルトでは横軸は500ピクセル、縦軸は正負の方向に150ピクセルずつ(計300ピクセル)です。
• 座標の単位はピクセルですが、整数でない値も受け付けます。

150

O

-150

 500

上記原点や座標値はデフォルト出力に含まれません。

色指定

色が指定できる時の指定方法については、ニコニコ大百科:CSSでの色指定を参照してください。

 

 

---

コマンド一覧

以下ではコマンドの一部を大文字にしてありますが、先頭のコマンド文字列は大文字小文字の区別なく解釈されます。

斜体部分は適切な数値に置き換えるべき変数です。

[ ] で囲まれた部分は省略可能なオプションです。

モードコマンド

モードを切り替えます。

PolylineMode

PolylineMode[,color[,width]]

折れ線グラフ描画モードに移行し、以降の行は次のコマンド行出現まで折れ線グラフのデータとして解釈されます。

color, widthは折れ線グラフデータ行における線分の色・幅のデフォルト値を定めるもので、上記モードコマンド行で省略された時のデフォルト値はred, 1です。

データ行の記載方法についてはニコニコ大百科:グラフ機能(折れ線グラフ)を参照して下さい。

PieChartMode

PieChartMode,x,y,radius[,overlap]

x, y を左上の座標とする一辺 2 × radiusの正方形の中に、半径radiusの円グラフを描画します。

円グラフ描画モードとなり、以降の行は、次のコマンドが出現するまで円グラフのデータして解釈されます。

overlapはオプションで、円グラフをツールで解析しない限り意味がわからないと思いますが、扇形同士の重ね合わせの幅のデフォルト値を定めます。現在のデフォルト値は 30 ですが予告なく変更する可能性があります。

基準点は中心座標の方が良かったかもしれないので、予告なく変更することがあります。

コメント行以外のコマンドに遭遇するまでは各データ行は当該円グラフに属するデータとして解釈されます。たとえば、PieChartModeコマンド行が2つある場合は、円グラフが2つ作成されます。

データ行の記載方法についてはニコニコ大百科:グラフ機能(円グラフ)の記事をご参照下さい。

コンフィグコマンド

field

field,width,height,color

グラフの大きさと、外枠の色を決める。colorを省略すると外枠非表示になります。

枠外の描画の有無を選択可能にする?

2回使うと、2回目以降は新しいdivフレームを生成し、前のフレームに重ねる?

xAxis, yAxis

xAxis,color[,width[,coordinate]]

yAxis,color[,width[,coordinate]]

x軸とy軸を描画する色を省略またはtransparentにすると描画されない。

太さを0以下にすると描画されない。

グラフ機能同様先の太さは整数限定

座標系が変化する。

x軸は中央からの距離

y軸は左辺からの距離

枠外への軸の描画はサポートされない?ように仕様が変わるかもしれません。

noSource

noSource

生成に用いたコマンドをHTMLコメントアウトとして記載するのが(ver. 2.0.0以降の)デフォルトです。後日別の方がデータを修正してHTMLを再生成するのに役立つかと思い実装しました。noSourceコマンドは、それをoffにします。

HTMLソースがかさばるので、一旦投稿して元データを記録したら、次のリビジョンではHTMLコメントアウト部分を削除してもいいと思います。

コメント行

comment

comment,コメント文字列

,コメント文字列

1列目が"comment"もしくは空文字列""の場合はコメント行として無視されます。既出の通り先頭のコマンド文字列部分にはダブルクオーテーションは使用不可です。

つまり、行の先頭に','をつけるとコメント行にできます。

コメント行はモードに関係なく無視されます。

詳細

• データはExcelなどの表計算ソフトで原稿を作成した後、別途CSV形式で保存すると、手直しの必要が生じた時に便利です。
• 浮動小数点表記(例: 1.0e7)は受け付けないので、小数第4位までを推奨。
• 凡例や各軸の数値などについては(折れ線グラフ機能の)文字列挿入機能を使用して下さい。
• 入力データにサイズ範囲外の座標を指定可能です。この時、グラフは枠線からはみ出して描画されます。
• 枠にdiv要素を使用している関係で、グラフの上縁と下縁のy座標は2-4px程度の誤差があります。
• テキストは、後からbackground-colorを設定した何かを重ねても、それらより手前に表示されるようです(テキスト同士は、先のデータが奥になります。)。HTMLの仕様だと思われます。

関連項目

• ニコニコ大百科:グラフ機能