この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

Visualforce Charting を使用した複雑なグラフの作成

Visualforce Charting を使用して、さまざまなグラフコンポーネントから、関連データの複数のセットを表す複雑なグラフを作成します。最終的に、非常に洗練された注目を集めるグラフを作成できます。

グラフコントローラ

このトピックの後半の例では、次のコントローラを使用します。このコントローラは、「単純なグラフ作成の例」のコントローラを少し拡張したものです。リモート JavaScript 呼び出しでコールできる、より多くのデータおよびメソッドが含まれます。

@RemoteAction メソッドはこのトピックのグラフの例では使用されませんが、サーバ側メソッドおよび JavaScript Remoting メソッドの両方のデータ生成メソッドを再利用する方法を示します。

メモ

次は、1 暦年で「成立した商談」というデータセットの 3 つのデータ系列の 1 つをグラフ化した単純な折れ線グラフです。

この例では、次の点を確認してください。

同じ測定単位を使用する 2 番目のデータ系列は簡単に追加できます。ここでは、「不成立の商談」データセットを 2 番目の折れ線系列として追加します。

重要なのは、data1 項目および data2 項目の両方がそのコンポーネントの項目属性によって縦の <apex:axis> にバインドされている方法を確認することです。これにより、グラフ作成エンジンが軸の適切な目盛りと刻みのマークを特定できます。

他の単位でグラフを作成するもう 1 つのデータ系列を追加するには、2 番目の縦軸を追加する必要があります。次に、データ系列「月別収益」が棒グラフとして追加された例を示します。

次の点を確認してください。

グラフの凡例、系列ラベルを追加したり、グラフのラベルを確実に読むことができるようにすることで、グラフを分かりやすくすることができます。

これらの追加については、次の点を確認してください。

データ系列コンポーネントの順序が、グラフを描画する際のグラフ要素のレイヤを決定する。前の例では、棒グラフは前面に配置されていました。この例では、2 つの <apex:lineSeries> コンポーネントの前に <apex:barSeries> コンポーネントがあるため、棒グラフが背面に配置されています。
<apex:legend> コンポーネントは、左、��、上、または下の 4 つのどの位置にも配置できる。凡例はグラフの境界線内に配置されます。この例では、凡例によってグラフ自体の横幅が圧縮されています。
データ系列のコンポーネント title 属性を使用して凡例タイトルを追加する。
グラフの下軸のラベルを回転させるために、<apex:chartLabel> コンポーネントはこのコンポーネントが影響する <apex:axis> コンポーネントで囲まれている。
<apex:chartTips> コンポーネントにより、このコンポーネントを囲む系列の各データポイントの詳細を示すロールオーバーツールのヒントを有効にできる。