ニコニコ大百科:グラフ機能(円グラフ)

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

概要

円グラフ機能はニコニコ大百科:グラフ機能の拡張機能です。

2020年4月1日のニコニコ大百科:グラフ機能の実装により、HTMLのsvgタグやcanvasタグが使用できないニコニコ大百科でもお絵カキコに頼らずに折れ線グラフや疑似曲線を描くことができようになりましたが、曲がった領域を塗りつぶすことができず、円グラフを作成することはできませんでした。

公開2周年となるこの度、ニコニコ大百科:グラフ機能の拡張としてニコニコ大百科:円グラフ機能が実装されたことにより、円グラフの作成も可能になりました。

画面/使用例

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

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

データ入力欄

PieChartMode,125,125,124
1,red
1,yellow
2,blue
2,green
,x軸を消去
xAxis,

幅

500

px × 高さ

300

px

枠とx軸を表示 ✔

線分の太さ

1

px

変換

クリップボードにコピー

HTMLソース

<div style="height: 300px; width: 500px; border: 1px solid green;"><div style="height: 150px; width: 500px;"></div><div style="height: 150px; width: 500px; margin-left: 0px; margin-top: 0px;">            <div style="
            width: 248.0000px; height: 248.0000px;
            margin-left: 125.0000px; margin-top: -125.0000px
            ">
                    <div style=" border-radius: 124.0000px; width: 248.0000px; height: 248.0000px; overflow: hidden;">
       
            <div style="overflow: hidden; transform:rotate(-30deg);
            width: 154.0000px; height: 184.0000px;
            margin-left: 82.6840px;
            margin-top: -60.1936px;
            ">            <div style="overflow: hidden; transform:rotate(-60deg);
            width: 154.0000px; height: 184.0000px;
            margin-left: -92.1936px;
            margin-top: -35.6840px;
            "><div style="background: green;
width: 154.0000px; height: 154.0000px;
"></div>
<div style="background: red;
width: 154.0000px; height: 30.0000px;
"></div>
<div style="background: green; transform:rotate(45deg);
width: 124.0000px; height: 124.0000px;
margin-left: -25.6812px;
margin-top: -92.0000px;
"></div></div></div>

            <div style="overflow: hidden; transform:rotate(0deg);
            width: 154.0000px; height: 184.0000px;
            margin-left: 124.0000px;
            margin-top: -153.8064px;
            ">            <div style="overflow: hidden; transform:rotate(-30deg);
            width: 154.0000px; height: 184.0000px;
            margin-left: -41.3160px;
            margin-top: -30.1936px;
            "><div style="background: red;
width: 154.0000px; height: 154.0000px;
"></div>
<div style="background: yellow;
width: 154.0000px; height: 30.0000px;
"></div>
<div style="background: red; transform:rotate(45deg);
width: 124.0000px; height: 124.0000px;
margin-left: -25.6812px;
margin-top: -92.0000px;
"></div></div></div>

            <div style="overflow: hidden; transform:rotate(60deg);
            width: 154.0000px; height: 184.0000px;
            margin-left: 139.1936px;
            margin-top: -86.3160px;
            ">            <div style="overflow: hidden; transform:rotate(-30deg);
            width: 154.0000px; height: 184.0000px;
            margin-left: -41.3160px;
            margin-top: -30.1936px;
            "><div style="background: yellow;
width: 154.0000px; height: 154.0000px;
"></div>
<div style="background: blue;
width: 154.0000px; height: 30.0000px;
"></div>
<div style="background: yellow; transform:rotate(45deg);
width: 124.0000px; height: 124.0000px;
margin-left: -25.6812px;
margin-top: -92.0000px;
"></div></div></div>

            <div style="background: blue;
            overflow: hidden; transform:rotate(120deg);
            width: 154.0000px; height: 184.0000px;
            margin-left: 62.1936px;
            margin-top: -122.0000px;
            "></div>

        <div style="margin-top: -313.6840px;width: 124.0000px; height: 248.0000px; overflow: hidden;">
            <div style="overflow: hidden; transform:rotate(210deg);
            width: 154.0000px; height: 184.0000px;
            margin-left: -50.6840px;
            margin-top: 47.1936px;
            ">            <div style="overflow: hidden; transform:rotate(-60deg);
            width: 154.0000px; height: 184.0000px;
            margin-left: -92.1936px;
            margin-top: -35.6840px;
            "><div style="background: blue;
width: 154.0000px; height: 154.0000px;
"></div>
<div style="background: green;
width: 154.0000px; height: 30.0000px;
"></div>
<div style="background: blue; transform:rotate(45deg);
width: 124.0000px; height: 124.0000px;
margin-left: -25.6812px;
margin-top: -92.0000px;
"></div></div></div>

            <div style="background: green;
            overflow: hidden; transform:rotate(240deg);
            width: 154.0000px; height: 184.0000px;
            margin-left: -45.1936px;
            margin-top: -234.8775px;
            "></div>

            <div style="overflow: hidden; transform:rotate(330deg);
            width: 154.0000px; height: 184.0000px;
            margin-left: 82.6840px;
            margin-top: -240.5096px;
            ">            <div style="overflow: hidden; transform:rotate(-60deg);
            width: 154.0000px; height: 184.0000px;
            margin-left: -92.1936px;
            margin-top: -35.6840px;
            "><div style="background: green;
width: 154.0000px; height: 154.0000px;
"></div>
<div style="background: red;
width: 154.0000px; height: 30.0000px;
"></div>
<div style="background: green; transform:rotate(45deg);
width: 124.0000px; height: 124.0000px;
margin-left: -25.6812px;
margin-top: -92.0000px;
"></div></div></div>

        </div>
        </div>
            </div></div></div>
<!--
上記はニコニコ大百科:グラフ機能(https://dic.nicovideo.jp/id/5586732)ver.2.0.0に
以下のデータを入力して作成されました:
PieChartMode,125,125,124
1,red
1,yellow
2,blue
2,green
,x軸を消去
xAxis,
-->

使用方法

使用方法や使用上の注意についてはニコニコ大百科:グラフ機能と同じですが、データの指定方法が異なります。

• 入力データにPieChartModeコマンド行があると円グラフ描画モードに入り、以降の行は円グラフのデータとして解釈されます。
• PieChartModeコマンド行ではx, y座標、半径を指定します。
• コマンド行(コメント行を除く)が出現した時点で、PieChartModeは終了します。
• さらに通常の折れ線グラフを描くにはPolylineModeコマンドを指定します。(詳細は後述)

PieChartMode

• 1列目がデータ(合計値で正規化されるので度数法に変換は不要)
• 2列目が色
• 3列目のデータは半径(サポート対象外)。省略可能で、省略時はデフォルト値が使用されます。この順番なのはoverlapを後方や外側についても別に定義する可能性があるからです。
• PieChartModeで指定した半径を超えるradiusを指定しても切り落とされます。もしかしたら、overlapを0にした時に外周への拡張の代わりにできるかも知れません。
• 4つ目のデータは隙間を埋めるための補正値です。

仕様

• 扇形の中心角は度数法で整数になります。これはニコニコ大百科の仕様によるものです。
• 中心角の端数は、ドント方式に近い方法で大きい要素から調整するようになっています。
• 中心角が0度になるデータが出るとエラーになります。
• 円グラフは大きさの降順にするのが慣例ですが、あえて降順にしないケースも考えられるので、ソート機能はありません。
• 扇形を組み合わせたら出来そうに思えますが、ブラウザの小数点以下のピクセルに対する処理により、隙間が出来たり、外周ににじみができたりすることがあるので、防止策のために境界部に重複する領域を設けており、かなり面妖なHTMLになっています。
• 鶏頭図やローズダイアグラムのようなものにも対応できるよう半径は可変にしたかったのですが、上述の小数点以下の処理による問題に対応できないため、半径は途中で変更できない仕様になりした。
• 欠けた円グラフを表示するために、色としてtrasparentは指定できるようにしていますが、重複部分の要素が見えてしまいます。overlapに0を指定するなどの回避策をお試し下さい。
• 数値に小数も指定できますが、テストしていません。環境による不具合を起こす可能性が高いと見込まれます。PieChartModeのデータ行の数値には小数の使用は可能です。

既知の問題点

• 一番問題が少ないと思える実装でも、ズーム倍率によって円グラフの中心部分に空白が生じたり、外周部分で隣の領域への1ドット分の食い込み、あるいは1ドットの欠けが発生する場合が出ることあります。
• 扇形の色が、隣の扇形の外周ににじむことがあります。かなり工夫して発生は抑え込めたと思いますが、隣の扇形が細い場合、隣の隣の扇形ににじみが発生することがあります。
• この仕様にするまで10種類以上試作しました。

回避策

全ての場合において回避できる保証はありませんが、以下の方法で症状を改善できる場合があります。

• 重複部分の幅をオプションで変更できるようにしておいたので、これを小さくしたり0にしたりすると隣の扇形でのにじみの発生が抑制されます。ただし、今度はズーム倍率によって境界線に隙間が発生することがあります。
• 隙間が発生する場合は、背面に色のある図形を配置することで解決できる場合があります。
• 外周のにじみは色の組み合わせで起きるので、色を変更すると解決することがあります。

サンプル

UTF-8

UTF-8の記事の円グラフはニコニコ大百科:円グラフ機能のアルファ版を用いて作成しました。

色相環

元のニコニコ大百科:グラフ機能よりもきれいな円が書けると言おうとしていましたが、環境によっては上端の左寄りが少しくぼんでしまう模様。もう直す気力がないが今後の検討課題。

墓地歴史館(予定地)

実装したけれど没になった方式や採用した実装を紹介予定。

未整理だがこちらに埋葬格納(予定)。

関連項目

• ニコニコ大百科:グラフ機能
  • ニコニコ大百科:グラフ機能(折れ線グラフ)
  • ニコニコ大百科:CSSでの色指定