2

カスタム シェイプの塗りつぶしとしてパーセンテージ値を表示するための新しいオプションを検討しています。この効果は、従来のダッシュボード UI の意味での「進捗温度計」に似ていると考えてください。

考慮事項

  • 目標 - カスタム レポートのパーセンテージ値を示すグラフィック要素。
  • フォーマット - 完全なグラフィック (またはインフォグラフィック) 自体、または Photoshop/InDesign または iBooks を介した PDF の一部 (使用する言い訳として)。
  • 使用法 - 再利用のために、プロセスをプログラムで行いたい。正確である必要があり、他のデータセットやグラフィカル コンテナーに適用できるように、ソリューションをある程度オブジェクト指向にしたいと考えています。これにより、手書きのチャートは除外されます。
  • ソース データ - 現在は Excel のピボット テーブルですが、必要に応じて他のホストと連携できます。
  • Shape - Illustrator/Inkscape に由来するカスタム ベクトル形状です。レポートの解像度とレンダリングに最適な最終形式。他のジェネレーティブ シェイプのアイデア (java/javascript など) にも興味があります。
  • 塗りつぶし - 塗りつぶしを、総面積の実際のパーセンテージ (トゥルーアップ) と垂直スケールのパーセンテージの両方で表現できるようにしたいと考えています。この柔軟性は、選択したオブジェクト変数 (高さ、面積など) に対する塗りつぶし値としてメソッドを再利用するのにも役立つと思います。

私は、プログラミング言語やホスト側のことについて少し漠然としていることを知っていますが、これにより、通常の分析ツールチェーンから抜け出し、いくつかの革新的または新しいソリューションを検討する機会が得られます. 私は特にオープン ソース ソリューションに興味がありますが、提案された他の現在の方法を検討したいと思っています。

4

3 に答える 3

1

1 つの寸法を変更することでパーセンテージを簡単に新しい形状に変換できる形状に限定する場合は、最初の形状に基づいて2 番目の形状を作成し、2 番目の形状を 100% 塗りつぶすことで表示部分を覆うことができます。形。

これは明らかに、「面積の 50%」または「高さの 75%」をベクター ノードの操作に変換するのが簡単な、正方形、長方形、円などの単純な形状で最適に機能します。

ただし、真に任意のカスタム形状をサポートしたい場合、事態はさらに困難になります。これを処理する 1 つの方法は、複雑な「進行状況バー」を「進行状況の断片」に分割することです (たとえば、進行状況全体の 10% を表す温度計の電球と、残りの 90% を表す単純なバー)。

于 2012-05-25T00:49:40.603 に答える
1

前述したように、D3はあなたのニーズを満たすようです。あなたが求めていると思われる簡単な例を次に示します。

異なる形状の塗りつぶしの色を変更する: http://jsfiddle.net/jsl6906/YCMb8/

単純な形状の「塗りつぶし量」を変更する: http://jsfiddle.net/jsl6906/YCMb8/1/

于 2012-05-27T02:00:17.657 に答える
1

これは少しオープンエンドかもしれませんが、d3.jsは非常に強力です。サイトには便利なテンプレートがいくつかあるかもしれませんし、ライブラリから独自のテンプレートを作成することもできます。

于 2012-05-04T11:17:45.560 に答える