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

ニコニコ大百科:グラフ機能を使用すれば、HTMLのsvgタグやcanvasタグが使用できないニコニコ大百科でもお絵カキコに頼らずにグラフが描けます。

概要

これまでニコニコ大百科でグラフを作成しようとするなら、svgタグやcanvasタグが使用できない仕様上、お絵カキコを用いるくらいしかありませんでしたが、このグラフ機能を用いれば、データに基づいた正確なグラフの作成が容易になります。

2020年4月1日の公開から3年になるニコニコ大百科:グラフ機能ですが、公開プラットホームとして利用していたゲームアツマールのサービス終了が決定し、2023年4月19日で投稿作品の更新が出来なくなることとなりました。突然ではございますが、これに先立ち2023年4月1日をもちましてゲームアツマールでの公開を終了することといたしました。

ありがとう、そしてさようなら……ゲームアツマール。

ゲームアツマールの掲示板でPLicyというプラットホームの存在を知り、そちらに移管しましたので今後はPLicy版をご利用下さい。

P L i c y

P

Q

R

R'

　　|

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

svgタグなどが使えないニコニコ大百科でも、グラフを描画できます。 使い方などの詳細は下記記事を参照して下さい。 https://dic.nicovideo.jp/id/5586732 Q: ゲームではないのでは? A: 自分の思ったとおりのグラフになるようにデータを考えて入力するというゲームです... ... .......ごめんなさい。 ですがPLicy運営に確認したところ、ETCカテゴリにゲームでないものを投稿してよいそうです。

ジャンル: ETC
作者: deadbull

目次

作成中

• 使用法
  • コマンド解説
  • 折れ線グラフ
  • 円グラフ
• 更新履歴
• 使用上の注意
• Q&A

画面/使用例

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

• 本ページ及び生成された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>

使用方法

ゲームアツマール側の基本操作

1. コマンドとデータ行をcsv形式で用意します。コマンドについてはコマンド解説を参照して下さい。
   • CSVには値を引用符で囲う形式のものがありますが、引用符は使用せずに作成して下さい。
2. 上記で作成したCSVデータを「データ入力欄」に貼り付けます。
3. データ入力欄直下にある「変換」ボタンを押します。
4. ページの一番下に、座標データの点を結ぶ形でグラフが描画されます。
5. 「クリップボードにコピー」ボタンを押してHTMLソースをクリップボードにコピーします。

ニコニコ大百科側での操作

1. グラフを貼り付けたいニコニコ大百科の編集画面を開き、「HTMLエディタの有効と無効を切り替える」ボタンを押して、HTMLソース編集画面にします。
2. グラフを貼り付けたい場所にクリップボードからHTMLソースコードを貼り付けます。
3. 「投稿内容を確認する」ボタンを押して、ニコニコ大百科側に無効な要素を消されるなどしてグラフが変形していないことを確認し、「投稿する」ボタンを押して投稿します。
4. 念の為、正しく表示されているか(できれば複数のブラウザ・OSで)ご確認下さい。

その他のオプション

グラフサイズ変更

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

枠線の表示

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

線分の太さ

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

子記事

• ニコニコ大百科:グラフ機能(コマンド解説)
  • ニコニコ大百科:グラフ機能(折れ線グラフ)
  • ニコニコ大百科:グラフ機能(円グラフ)
• ニコニコ大百科:グラフ機能(サポートページ)
• ニコニコ大百科:CSSでの色指定

関連項目

• 1次元
• ニコニコ大百科
• ニコニコ大百科:HTMLテンプレート集
• ゲームアツマール
• 非公式
• グラフ / 折れ線グラフ / 円グラフ
• HTML / CSS / JavaScript
• Kotlin / トランスパイル
• タートルグラフィックス
• 百ッカデミー賞2021