graph - 円グラフの負の値

Question

私のアプリケーションでは、さまざまな種類のグラフを使用してデータを視覚化しています。円グラフで視覚化された一部のデータには、負の値が含まれています。円グラフは、ネガを表示するようには設計されていません。

Excelは、すべての値の絶対値を出力します。したがって、-20 は、円周の 20% のスライスとして円グラフに出力されます。数値が負であることを確認する唯一の方法は、凡例を参照することです。

私たちが使用するグラフ作成エンジンであるHighchartsは、ポジティブ スライスをそのまま残しますが、ネガティブを非常に奇妙で紛らわしい方法でレンダリングします ( JS Lint の例)。ネガをレンダリングしようとする彼らへの賛辞ですが、私たちのユーザーは混乱しています.

否定的な要素は円グラフでは意味をなさないため、除外することを提案する人もいます。これはデータを取り除き、データ セットを完全には表していないため、おそらくうまくいかないでしょう。

また、棒グラフなど、より適切な種類のグラフを使用することを提案する人もいます。

これを解決するための他のオプションはありますか? どうやってそれをしましたか？

Answer 1

正の値には緑の色合いを使用します。

負の値の絶対値を使用して、さまざまな負の値を赤の色合いで表示します。

Answer 2

最近、同じ問題を考えて、こんなラフサンプルを作ってみました。
アイテム B が負の値であると仮定してください。

d3.js の「arc」と「pie」機能はとても便利です。

作業サンプルはこちら.

このように同心円も追加しました。

Answer 3

円の周りにドーナツ グラフを使用して、1 つを使用して正の値を表し、もう 1 つを負の値に表すことができます。ここで重要なのは、100% を表す値が正と負の両方で同じであることです。結果は、ポジティブ、ネガティブ、およびセット全体のポジティブまたはネガティブの視覚的表現です。

http://www.highcharts.com/demo/pie-donut

Answer 4

2 つのドーナツ チャートを互いに並べて使用できます。1 つは負の値を表し、もう 1 つは正の値を表します (緑/赤などの異なる色のグラデーションを使用して、どれがどれであるかを示すことができます)。秘訣は、正または絶対負の値に従って各ドーナツの半径を選択することです。オーバーラップがある場合は、両方のドーナツ間の境界が両方の絶対値の平均になるように視覚化を調整します。