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

ニコニコダイヒャッカエングラフキノウ
5.9千文字の記事
  • 1
  • 0pt
掲示板へ
記事編集  

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

概要

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

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

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

画面/使用例

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

データ入力欄

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

仕様

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

既知の問題点

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

回避策

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

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

サンプル

UTF-8

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

色相環

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

墓地歴史館(予定地)

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

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

関連項目

【スポンサーリンク】
  • 1
  • 0pt
  • ページ番号: 5648344
  • リビジョン番号: 3015729
  • 編集内容についての説明/コメント:
    • 構成を変更して一部を本体に移す。
記事編集 編集履歴を閲覧

この記事をもとに新規記事を作成

一般単語や、ニコニコの各サービスに関する記事などは、単語記事をご利用ください。
単語記事は、プレミアム会員のみが編集できます。

x
facebook
hatena

ニコニ広告で宣伝された記事

東方Project (単) 記事と一緒に動画もおすすめ！
提供： おさゆく大好き
44259100pt
もっと見る

この記事の掲示板に最近描かれたお絵カキコ

お絵カキコがありません

この記事の掲示板に最近投稿されたピコカキコ

ピコカキコがありません

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

まだ掲示板に書き込みがありません…以下のようなことを書き込んでもらえると嬉しいでーす！

  • 記事を編集した人の応援(応援されると喜びます)
  • 記事に追加して欲しい動画・商品・記述についての情報提供(具体的だと嬉しいです)
  • ニコニコ大百科:グラフ機能(円グラフ)についての雑談(ダラダラとゆるい感じで)

書き込みを行うには、ニコニコのアカウントが必要です！

急上昇ワード改

おすすめトレンド

ニコニコニューストピックス

“音属性”キャラといえば？ 3位「マッシュル」 マカロン、2位「ヒロアカ」耳郎響香、1位は「鬼滅の刃」宇随天元
「絶対やめてください」人気お好み焼き店の注意喚起が700万超表示　「うっかりやっちゃう」「ためになった」
「恐怖コレクター」26年秋にNHK総合でTVアニメ化　都市伝説モチーフの児童小説
彼氏の誕生日に、彼女が渡したのは……「すごっ」「えっ？」「どういうこと？」　“予想外すぎる贈り物”が90万再生
コスプレイヤーが肩幅を盛るために使ったのは……　誰もが驚くまさかのアイテムに「待ってあかん爆笑した」「天才すぎるwww」
客が帰ったあと、テーブルを片付けに行くと……　店主が泣いた“まさかの光景”に大反響「私も行ってみたい」
「ここにスナップボタンがあったらいいのに」→一瞬で解決できる驚きのアイテムが380万表示「絶対買います」「革命ですよね」
カービィ＆ワドルディのぷっくりかわいいハイブリッドポーチが新登場。Nintendo Switch 2本体やゲームカード10個、小物類を収納できる使いやすいアイテム。現在予約受付中、2025年12月31日に発売予定
東京は世界4位に！　最新の「都市ランキング」が公開