ProEssentials チャートギャラリー

下のチャートは、サンプルプロジェクトとデモの例「030」をご覧ください。

この例は、複数の Y 軸と X 軸に沿った不連続な日付カレンダーを持つ Open High Low Close、ローソク足、ボックスプロットのチャートの作り方を開発者に教えます。日付/時刻 X 軸には日付の書式設定に複数のオプションがあり、この例は3文字の月と日を表示しています。この例をダウンロードして実行すると、Table アノテーションのホットスポットを使ってデータを変更する方法や、リアルタイムの Table アノテーション更新も見られます。

プログラムから制御する場合でも、エンドユーザーがどのサブセット（系列）を表示するかを制御する場合でも、複数の軸は必要に応じて自動的に表示・非表示・再構成されます。多くの科学チャートは、似たような複数の、あるいは重なり合う Y 軸を必要とします。

下は上のチャートをより狭い日付範囲へズームインしたものです。下部の X 軸とチャート領域上部の、より高密度な日付ラベルに注目してください。ズームは、マウスホイールの回転、または左クリックドラッグでズームボックスを描くことで行います。

下は、Graph アノテーションをうまく使って独自の金融スタディを実装した、お客様によるチャートです。

下は坑井（ウェルボア）データの 3D チャートです。坑井とは、石油、ガス、水などの天然資源の探査と回収を助けるために掘削される穴のことです。坑井は井戸を形作る実際の穴です。

サンプルプロジェクトとデモの例「403」をご覧ください。

緑のチューブはライン型の「GraphAnnotations」で、シンプルな MoveTo-LineTo の仕組みで実装されています。これらのライン アノテーションは、本物の線としてもチューブとしてもレンダリングできます。チャートコンポーネント内部では、チューブは GPU 上のジオメトリシェーダーで構築されるため、ポイントあたり4頂点だけが必要です: チューブ区間のスパンを制御する2頂点と、チューブの端の接合を制御する隣接2頂点。ジオメトリシェーダーが128頂点を注入してチューブ本体の区間を形成します。あなたが書かなくて済むように、当社が大量の複雑な三角法と行列計算のコードを書きました。

3D グラフ アノテーションのテキストは、常に 2D でビューアーの方を向き、2D では他のアノテーション、サブセット、軸ラベルを自動回避します。実にスマートです。真に最高クラスのチャートコンポーネントとして、当然あるべき姿です。

坑井の座標をエンドユーザーに表示するツールチップ機能も示されています。これは標準の Windows ツールチップで、標準 Windows ツールチップが提供するすべての機能を調整するプロパティを用意しています。

このデモを実際に動かして数字キー0〜9を押すと、ドリルが井戸を下っていくアニメーションが起動します。先にチャートをダブルクリックして自動回転機能を開始してから0〜9を押すと、カメラが井戸の周りを360度回転しながら、視点が井戸を下っていくアニメーションになります。実にスマートで、必見です。これは、あなたが心配しなくてよい複雑な三角法と行列数学の変換を表しています。

次のチャートは、別の配色スタイルと、底面の 2D コンターラインの代わりに底面の 2D カラーコンターを示します。アノテーション ラベルの表示/非表示を切り替えるシンプルなプロパティがあり、オプションでソフトウェアのエンドユーザーにも提供できます。

チャート ドキュメント内でプロパティ「ShowContour」と「ShowAnnotationText」を検索してください。

次の例はデモにはありませんが、お客様が送ってくださった 2D ヒートマップ / 2D コンター / スペクトログラムの実装です。スペクトログラムとは、信号の周波数スペクトラムが時間とともに変化する様子の視覚表現です。

サンプルプロジェクトとデモの例「139、120、121、122」で同様のチャートをご覧ください。

上と同じチャートですが、より詳細を示すためにズームしたものです。ProEssentials のチャートは2つのズーム方法を提供します。

• 右クリックして選択領域をドラッグする。
• マウスホイールを回転してズームイン/アウトする。

チャート ドキュメント内でプロパティ「AllowZooming」と「MouseWheelFunction」を検索してください。

下は、通常の線形スケールではなく、すべての軸を Log スケールにした 3D 散布図です。

X、Y、Z のグリッド線ラベルが、オプションの科学的記数法になっていることに注目してください。

このチャートはオプションでアイソメトリック（等角投影）でも表示できます。この投影では、奥の底面グリッドの正方形が手前の底面グリッドの正方形と同じサイズであることに注目してください。奥行きがデータの位置やサイズを歪めず、シンボルのサイズは画像の奥にあっても同じように見えます。

サンプルコードとデモの例「404」をご覧ください。

Log スケールは、プロパティ「PeGrid.Configure.XAxisScaleControl」「YAxisScaleControl」「ZAxisScaleControl」で制御します。

次のチャートは上と同じ 3D 散布図を、マウスホイールでズームインしたものです。

黄色のドットの間にある赤い塗りつぶしドットと、この赤いドットのデータ座標のテキスト表示に注目してください。このスクリーンキャプチャにはマウス矢印は写っていませんが、マウスはこの赤いドットの上にあります。チャートが、マウス下のデータ値のヒットテストとデータ プロンプティングを提供しているのです。

次のチャートはデモの例404に似ていますが、ProEssentials の 3D Graph アノテーション機能をさらにいくつか実演します。GraphAnnotationPolyData（開発者が低レベルの実際の頂点位置を与えてポリゴンを生成できる）と、より高レベルの GraphAnnotation タイプにより、ProEssentials プロパティ「GraphAnnotationType」のシンプルな既成アノテーション機能で、円柱、円錐、3D 楕円体、立方体、2D 楕円、2D 矩形などを生成できます。

次のチャートは上と同じ 3D 散布図を、マウスホイールでズームインしたものです。

視点（カメラ位置）が灰色の球体の内側から外を見ていることに注目してください。そして再び、マウス矢印の位置でデータ座標がプロンプトされている赤い立方体（Red Cube）に注目してください。

下のチャートは、サンプルコードとデモの例「123」のものです。

左上の緑のテキスト「Play」に注目してください。サンプルプロジェクトやデモを実際にダウンロードして見るときに、このテキストをクリックしてください。曲の再生が始まり、垂直のライン アノテーションが再生位置をリアルタイムに追いかけます。次にマウスホイールでズームインして、現在の再生位置のより詳細なビューを表示してください。500〜1000ポイントまでマウスホイールでズームインするのは実に爽快です — リアルタイム チャートはオシロスコープのようになり、データが右から左へ動くのを知覚するのではなく、フレームごとに完全に異なるデータが表示されます。

このチャートは、イベントベースのカスタム X 軸書式設定機能も示しています。X 軸がレンダリングされるとき、グリッド線ラベルのテキストが開発者のイベントへ送られ、開発者がラベルテキストのカスタム表現を注入できます。わずか数行のコードで、独自のカスタム X 軸書式を作れます。

下のチャートは、サンプルコードとデモの例「130」のものです。

このチャートは追加の X 軸と Y 軸を実演します。2つのスケールが同じデータを表せるとき — たとえば摂氏と華氏 — のシンプルな機能です。

下のチャートは、サンプルコードとデモの例「129」のものです。

このチャートは、縦向きの Y 軸グリッド数値と、グリッドラベル領域に埋め込まれたサブセット凡例を実演します。

これらの機能を組み合わせる目的は、多数の重なり合う複数 Y 軸を実装するときにウィンドウ領域を節約することです。1つのウィンドウにこうしたチャートを20個並べるような場合、チャート自体が非常に小さくなるため特に有効です。

下のチャートは、サンプルコードとデモの例「132」のものです。

このチャートは、イベントを使って Y 軸をカスタム書式設定する方法を実演します。たとえば、Y 軸の [400] があるはずの場所に、代わりに [High Value] と表示されています。

下のチャートは、サンプルコードとデモの例「409」と「401」のものです。

これらのチャートは、3D カラーコンターと GIS 機能を 3D グラフ アノテーションと組み合わせて実演します。

下のチャートは、サンプルコードとデモの例「301」のものです。

このチャートは円グラフの機能を実演します。サンプルプロジェクトやデモの実行中に、チャートを右クリックして [Data Shadows] と [Gradient Styles] を選択すると、以下のさまざまな代替チャートが表示されます。

ProEssentials には、ゼロのスライス（または任意の閾値未満のスライス）を自動的に「その他」スライスへまとめ、ゼロ、null データ、極小の断片をクリーンでプロフェッショナルに処理する組み込み機能があることに注目してください。

凡例を円グラフから分離するオプションの凡例機能。

下のチャートは、サンプルコードとデモの例「200」のものです。

このチャートは ProEssentials の極座標チャート（ポーラーチャート）機能を実演します。サンプルプロジェクトやデモの実行中に極座標チャートをズームすると、業界最高の極座標チャートであることが分かります。極座標グリッドはズームのレベルに応じてインテリジェントに構造を変えます。

下は上と同じチャートですが、ズームしたものです。

下のチャートは、オプションの高密度な極座標チャート グリッドを示します。

下のチャートは、サンプルコードとデモの例「203」のものです。

このチャートは ProEssentials のスミスチャート機能を実演します。サンプルプロジェクトやデモの実行中にスミスチャートをズームすると、業界最高のスミスチャートであることが分かります。スミスチャートのグリッドはズームのレベルに応じてインテリジェントに構造を変えます。

アドミタンス チャートにも同様のサポートがあります。

下は上と同じチャートですが、ズームしたものです。

下のチャートは、サンプルコードとデモの例「407」のものです。

このチャートは ProEssentials の 3D ウォーターフォール チャート機能を実演します。サンプルプロジェクトやデモの実行中に、チャートを右クリックし「Plotting Method」メニューで Point を選ぶと、このビューになります。

下のチャートは、サンプルコードとデモの例「402」のものです。

このチャートは、色と Y の大きさの値の間にランダムな非線形関係を持たせた ProEssentials の 3D サーフェス コンターを実演します。

コンター凡例の中の、より大きな黄色のコンターカラー部分に注目してください。

下のチャートは、サンプルコードとデモの例「406」に似ています。

このチャートは ProEssentials の 3D ポリゴンデータ インターフェイスを実演します。

この画像は、第4次元のデータセット WData を与えてチャートを拡張し、4D - 3D レンダリングのコンター Plotting Method を可能にしています。

下のチャートは、サンプルコードとデモの例「403」に似ています。

このチャートは、3D ワイヤーフレームのプロット方法とプロパティ「PointColors」を組み合わせ、望むどんな第4次元的な方法でもチャートをカスタムカラーリングできることを示します。

下のチャートは、サンプルコードとデモの例「139」です。

このチャートは、Direct3D と DirectX ハードウェア アクセラレーションで実装された、Log Linear スケーリング付きの 2D ヒートマップ、2D コンター、スペクトログラムを示します。

下のチャートは、上のチャートをより詳細を示すためにズームしたものです。

下のチャートは、サンプルコードとデモの例「121」です。

このチャートは、等値線のラベリング付きの 2D コンターラインとしてプロットされた 2D コンターを示します。

下のチャートは、サンプルコードとデモの例「122」です。

このチャートは、奥行きの視覚化を助けるオプションのシャドウイング付きの 2D コンター プロットを示します。

下のチャートは、上と同じチャートからシャドウイングを外したものです。

サンプルプロジェクトやデモの実行中に、チャートを右クリックし「Plotting Method」メニューで「Contour Colors」を選ぶと、このビューになります。

2D コンターのシャドウ機能はデータに劇的な奥行きを加えますが、他のデータやアノテーションにより注目を集めたいときには、シャドウなしのビューも有用です。

下のチャートは、上と同じチャートをより詳細を示すためにズームしたものです。

下のチャートは、サンプルコードとデモの例「400」です。

このチャートは、マウス下のデータのスライスをアノテートするリアルタイム 2D ポリゴン アノテーション付きの 3D ワイヤーフレーム プロットを示します。

サンプルプロジェクトやデモの実行中に、サーフェスチャート上でマウスを動かすと、MouseMove イベントのサンプルコード内にあるリアルタイム 2D スライスのロジックが見られます。また、キー0〜9を押すと、アノテーション0〜9へカメラビューを向けてチャートが自動回転します。続けてマウスホイールを回すと、対象のアノテーションの方向へズームイン/アウトします。チャートが回転するにつれて、アノテーション ラベルが互いを回避することに注目してください。

ほとんどのお客様の場合、このコードは Form1 にあり、例の ID 番号である「400」を検索すれば関連するサンプルコードをすぐに見つけられます。任意の番号に置き換えれば、サンプルプロジェクト内のどの例の関連コードでも見つかります。

下のチャートは、サンプルコードとデモの例「405」に似ています。

このチャートは、マウス下のデータ プロンプティング付きの 3D 棒グラフを示します（白いバーとデータ値1696に注目)。このチャートは、データの上に置かれた立方体のグラフ アノテーションも示しています。

下のチャートは、サンプルコードとデモの例「105」に似ています。

このチャートは、Y、右 Y、X、上 X の各軸に対してプロットされたデータを持つ 2D ラインチャートを示します。

この例の目的は、機能「CursorMode」と動的なツールチップによるデータ座標プロンプティングを実演することです。

下のチャートは、サンプルコードとデモの例「110」に似ています。

このチャートは Log Log の 2D 散布図を示します。

この例の目的は、Log スケールと、エンドユーザーが Log スケールをズームしたときの振る舞いの良さを実演することです。

この例のもう1つの目的は、クイック描画グラフ アノテーションのエンドユーザー ツール機能の実装方法を示すことです。この機能は、mouse-down、mouse-move、mouse-up の各イベントにコードを置き、マウスのドラッグ中に一時的なグラフィックスを描くことで実装されます。サンプルプロジェクトやデモの実行中に、左クリックしたままマウスをドラッグすると、X と Y 方向のデータ単位幅をアノテートするテキスト付きの一時的な角丸矩形が描かれます。

下のチャートは上と同じチャートですが、別の Log スケール構造を示すためにズームしたものです。

下のチャートは、サンプルコードとデモの例「136」に似ています。

このチャートは、比較用ラインチャート付きの High-Low エリアチャートを示します。

系列の大小が入れ替わると、塗りつぶし領域の色が反転します。

下のチャートは、サンプルコードとデモの例「016」に似ています。

この例の目的は、日付/時刻データの扱い方と、エンドユーザーがチャートをさまざまな範囲へズームしたときの X 軸の振る舞いの良さを示すことです。チャートのサイズ変更、ポップアップメニューでの X 軸ラベルの向きの変更、そしてズームを組み合わせれば、当社の実力に大いに触れることができ、全体的なレンダリングの優位性が分かるはずです。

下のチャートは、サンプルコードとデモの例「015」に似ています。

この例の目的は、2D チャート内に基本的なグラフ アノテーションを描く方法を示すことです。この例のコードを学ぶ際、この例には右 Y 軸があり、右 Y 軸に対してアノテーションをプロットする方法も示していることに注目してください。

例015は、例007、014、000、012、100、103とともに、ProEssentials の学習を始めるのに最も役立つでしょう。

下のチャートは、サンプルコードとデモの例「126」に似ています。

この例の目的は、バブルチャートの描き方を示すことです。バブルチャートを作るときは、「PeData.X」「PeData.Y」とともに「PeData.Z」を渡します。

下のチャートは、サンプルコードとデモの例「124」に似ています。

この例の目的は、プログラムで設定したズーム（水平範囲、最小、最大）を初期デフォルトビューとして表示する方法を示すことです。残りのデータ範囲は水平スクロールバーでパンできます。

下のチャートは、サンプルコードとデモの例「034」に似ています。

この例の目的は、次の方法を示すことです...

• 水平の積み上げ棒グラフを作る。
• Table アノテーションを作り、それを使ってエンドユーザーが系列の表示を選べるようにする。
• 段落テキストを表示する Table アノテーションを作る。

下のチャートは、サンプルコードとデモの例「003」に似ています。

この例はとても基本的な例で、左右両方の Y 軸に対して、異なるプロットスタイルで系列をプロットする方法を示します。

この例は、プロパティ「RYAxisComparisonSubsets = 2」を設定するだけです。これによりサブセットが2つのグループに分かれ、=2 が最後のグループのサイズを定義します。

プロパティ「PlottingMethod」が最初のグループのプロットスタイルを制御します。

プロパティ「PlottingMethodII」が2番目のグループのプロットスタイルを制御します。

2つのプロットスタイルを表示するこのオプションのアプローチなら、エンドユーザーが組み込みのカスタマイズ ダイアログでプロットスタイルを変更した場合でも、チャートの系列が論理グループに分かれていることを明確に理解できます。

複数のプロットスタイルを表示する方法はいくつかあります。プロパティ「PlottingMethods」は、系列ごとのプロットスタイル制御を可能にします。PlottingMethods の使用例はデモの例「022」をご覧ください。

下のチャートは、サンプルコードとデモの例「025」に似ています。

この例は、フローティング積み上げ棒グラフの作り方を示します。「PeData.Z」が積み上げバーのオフセットを制御します。

下のチャートは、サンプルコードとデモの例「410」です。

この例は、リアルタイム更新される 3D サーフェスチャートの作り方を示します。実装の詳細は、サンプルコードのタイマーイベント(410で検索)をご覧ください。

下のチャートは、サンプルコードとデモの例「408」です。