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

グラフのレイアウトとアノテーション

わかり��すいグラフを作成するには、凡例、有意義な軸範囲とラベル、データ要素のヒントまたはラベルを追加します。

デフォルトでは、すべてのグラフに凡例が表示されます。デフォルトの凡例を非表示にするには、<apex:chart legend="false"> に設定します。凡例の配置と凡例項目の間隔を制御するには、グラフに <apex:legend> コンポーネントを追加します。position 属性を使用して、グラフの四辺の境界のいずれかに凡例を配置します。凡例で使用するテキストスタイルを制御するには、font 属性を使用します。font 属性は、CSS スタイルの短縮フォントプロパティを指定する文字列です。たとえば、<apex:legend position="left" font="bold 24px Helvetica"/> です。

軸の目盛りとラベルを適切に設定しているかどうかは、理解不能な誤解を招くグラフになっているか、明確で説得力のあるグラフになっているかの違いとして現れます。デフォルトで、<apex:axis type="Numeric"> コンポーネントには fields 属性で設定したデータ項目に基づいて自動的に目盛りが設定されます。自動目盛り設定を使用すると、グラフ上にすべてのデータが収まりますが、開始値または終了値が有意義な数値ではない場合があります。自動目盛り設定を上書きするには、minimum 属性と maximum 属性を使用します。刻みマークの間隔を設定するには、steps 属性を使用します。この属性は、軸の両端間のステップ数を指定する整数です。測定値と目盛りを比べやすくするためにグラフに線や網かけを追加するには、dashSize 属性、grid 属性や gridFill 属性を使用します。

軸とデータ系列にはグラフラベルを適用できます。<apex:chartLabel> が <apex:axis> の子の場合、ラベルは軸の外側に描画されます。<apex:chartLabel> がデータ系列コンポーネントの子の場合、ラベルはグラフのデータ要素の上か近くに描画されます。ラベルのテキストを設定するには、field 属性を使用します。ラベルを描画する場所を設定するには、display 属性を使用します。グラフ上に収まるようにラベルのテキストを調整するには、orientation 属性や rotate 属性を使用します。

<apex:chartLabel> コンポーネントが <apex:pieSeries> コンポーネントと一緒に使用されている場合、orientation 属性による影響はありません。

メモ

次のサンプルグラフでは、これらのコンポーネントと属性を数多く使用して、見た目にわかりやすいデザインを作成しています。

1<apex:chart data="{!data}" height="400" width="500">
2    <apex:legend position="left" font="bold 14px Helvetica"/>
3    <apex:axis type="Numeric" position="left" title="Closed Won" grid="true"
4        fields="data1,data2,data3" minimum="0" maximum="225" steps="8" dashSize="2">
5        <apex:chartLabel />
6    </apex:axis>
7    <apex:axis type="Category" position="bottom" fields="name" title="2012">
8        <apex:chartLabel rotate="315"/>
9    </apex:axis>
10    <apex:barSeries orientation="vertical" axis="left" 
11        xField="name" yField="data1,data2,data3" stacked="true"/>
12</apex:chart>

Visualforce 開発者ガイド

グラフのレイアウトとアノテーション