ニコニコ大百科:グラフ機能を使用すれば、HTMLのsvgタグやcanvasタグが使用できないニコニコ大百科でもお絵カキコに頼らずにグラフが描けます。
概要
これまでニコニコ大百科でグラフを作成しようとするなら、svgタグやcanvasタグが使用できない仕様上、お絵カキコを用いるくらいしかありませんでしたが、このグラフ機能を用いれば、データに基づいた正確なグラフの作成が容易になります。
2020年4月1日の公開から3年になるニコニコ大百科:グラフ機能ですが、公開プラットホームとして利用していたゲームアツマールのサービス終了が決定し、2023年4月19日で投稿作品の更新が出来なくなることとなりました。突然ではございますが、これに先立ち2023年4月1日をもちましてゲームアツマールでの公開を終了することといたしました。
ゲームアツマールの掲示板でPLicyというプラットホームの存在を知り、そちらに移管しましたので今後はPLicy版をご利用下さい。
目次
作成中
画面/使用例
環境により表示は多少異なります。
<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>
<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>
使用方法
ゲームアツマール側の基本操作
- コマンドとデータ行をcsv形式で用意します。コマンドについてはコマンド解説を参照して下さい。
- 上記で作成したCSVデータを「データ入力欄」に貼り付けます。
- データ入力欄直下にある「変換」ボタンを押します。
- ページの一番下に、座標データの点を結ぶ形でグラフが描画されます。
- 「クリップボードにコピー」ボタンを押してHTMLソースをクリップボードにコピーします。
ニコニコ大百科側での操作
- グラフを貼り付けたいニコニコ大百科の編集画面を開き、「HTMLエディタの有効と無効を切り替える」ボタンを押して、HTMLソース編集画面にします。
- グラフを貼り付けたい場所にクリップボードからHTMLソースコードを貼り付けます。
- 「投稿内容を確認する」ボタンを押して、ニコニコ大百科側に無効な要素を消されるなどしてグラフが変形していないことを確認し、「投稿する」ボタンを押して投稿します。
- 念の為、正しく表示されているか(できれば複数のブラウザ・OSで)ご確認下さい。
その他のオプション
グラフサイズ変更
- 「幅」「高さ」の欄からグラフサイズを変更可能です。
- 値は整数のみ指定可能です。負の値も指定できますが正常に動作しません。
- 幅に負の値を指定すると、幅指定が消えて幅が親要素の幅に合うようですが、仕様に含まれない動作です。
- 「入力データ上の原点」は常に「左辺の中央」ですので、原点を変更したい場合は入力データを加工して平行移動して下さい。
枠線の表示
- デフォルトでは枠線とx軸はgreenで描画されます。
- 上記は「枠とx軸を表示」チェックボックスをオフにして消すことが出来ます。
- 枠線を消した場合でもグラフサイズ指定は有効で、後続の要素などの配置に影響します。
- 細かいですが、枠線を消すとグラフ全体を含むdiv要素の大きさが、枠線の太さ分だけ変わります。
- 枠線の色・太さなどを変更したい場合は外枠のdivボックス(y>0とy<0の2つある)を手作業で修正して下さい。
- グラフの外側にmargin等を指定したい場合は一番外のdivボックスを手作業で修正して下さい。
- 枠線のみ、x軸のみの消去は出来ません。両方共消して必要な要素をデータで描画するか、前述の外枠divボックス2つを手作業で修正して下さい。
- 左辺以外の位置にy軸が必要な場合は描画データにy軸を描画するデータを含めて下さい。
線分の太さ
- 折れ線グラフデータ行の4列目で線分の太さを指定しない時はこの欄の値がデフォルト値として使用されます。 deprecated: この機能は次以降の変更で廃止される可能性があります。
- 制約は折れ線グラフデータ行の4列目と同じです。
子記事
関連項目
- 1次元
- ニコニコ大百科
- ニコニコ大百科:HTMLテンプレート集
- ゲームアツマール
- 非公式
- グラフ / 折れ線グラフ / 円グラフ
- HTML / CSS / JavaScript
- Kotlin / トランスパイル
- タートルグラフィックス
- 百ッカデミー賞2021
- 8
- 0pt
