グラフの理解: 基盤となるデータとグラフ表現

[アーティクル]
02/23/2023

グラフには、水平 (x) と垂直 (y) の 2 つの軸にテキスト値をマップすることでデータが視覚的に表示されます。 x 軸は カテゴリ 軸と呼ばれ、y 軸は series 軸と呼ばれます。カテゴリ軸には数値と数値以外を表示できますが、系列軸には数値のみ表示されます。

モデル駆動形アプリのグラフは、さらに次のように分類できます。

単一系列グラフ: 単一の系列 (y) 値が単一のカテゴリ (x) 値にマップされたデータを表示するグラフ。
複数系列グラフ: 複数の系列値が単一のカテゴリ値にマップされたデータを表示するグラフ。複数系列グラフには、積み上げ縦棒グラフ (全カテゴリ合計に対する各系列の貢献度を垂直方向に表示) と 100% 積み上げ縦棒グラフ (全カテゴリ合計に対する各系列の貢献率を比較) があります。たとえば、縦棒グラフと横棒グラフ、棒グラフと折れ線グラフなど、複数系列グラフの、互換性のある別の種類のグラフと結合できます。

注意

複数カテゴリグラフは、Web アプリケーションで、またはここで説明するように XML 文字列を変更することで作成できます。

モデル駆動形アプリで SDK を使用してグラフを作成する際には、次の 2 つの要点を考慮する必要があります。

グラフの基になるデータ: データ記述 XML 文字列を使用して指定します。
データ表現 (外観): プレゼンテーション記述 XML 文字列を使用してデータプレゼンテーションを指定します。

注意

Microsoft Chart Controls を用いると、縦棒グラフ、横棒グラフ、面積グラフ、折れ線グラフ、円グラフ、じょうごグラフ、バブルチャート、レーダーチャートなど様々な種類のグラフを作成できます。モデル駆動形アプリのグラフデザイナーでは特定の種類のグラフのみを作成できます。ただし SDK を用いることにより Microsoft Chart Controls でサポートされているほとんどの種類のグラフを作成できます。

データ記述 XML 文字列を使用してグラフデータを指定する

データ記述 XML 文字列は、グラフに表示されるデータを定義します。 XML 文字列のコンテンツは、ビジュアル化データ記述スキーマに照らして検証されます。スキーマの詳細については、「ビジュアル化データ記述スキーマ」を参照してください。

グラフを作成する際に、組織所有のグラフまたはユーザー所有のグラフでそれぞれ SavedQueryVisualization.DataDescription または UserQueryVisualization.DataDescription を使用してデータ記述 XML 文字列を指定できます。

データ記述 XML 文字列には、<FetchCollection> および <CategoryCollection> という 2 つの要素が含まれます。

<FetchCollection> 要素

<FetchCollection> 要素は FetchXML を使用してグラフのデータを取得します。 FetchXML クエリは、グラフに表示されるデータのテーブル列、集計関数、およびグループ化句に関する情報を指定します。すべての FetchXML 集計関数がグラフでサポートされています。集計関数の詳細については、「FetchXmlを使用してデータを集計する」を参照してください FetchXML 。 ...

FetchXML クエリを使用すると、データをフィルタリングできます。また、フィルターはビュー経由でもグラフに適用されます。したがって、 FetchXML 要素のクエリでフィルター条件がすでに指定されていて、さらにビューを通じてフィルターが適用されている場合、チャートにはすべてのフィルターを適用した後に返されるデータが表示されます。 <FetchCollection> クエリを使用してデータをフィルター処理する方法の詳細については、「FetchXmlを使用してデータをクエリする」を参照してください。 FetchXML ...

注意

データ記述XML文字列は視覚化データ記述スキーマに対して再度検証されますが、 FetchXML 要素内のクエリは検証されません。 <FetchCollection> FetchXML クエリは FetchXML スキーマに対して検証されます。詳細については FetchXML の参照を参照してください。

グラフが比較グラフの場合、<FetchCollection> 要素には* 句による 2 つのグループが含まれます。

<CategoryCollection> 要素

<CategoryCollection> 要素には、グラフのカテゴリ (水平) 軸と系列 (垂直) 軸に関する情報が含まれます。

各 <Category> サブ要素には、プレゼンテーション記述 XML 内の <MeasureCollection> 要素にマップされる <Series> という子要素があります。単一系列グラフには単一の <MeasureCollection> 子要素があり、複数系列グラフには複数の <MeasureCollection> 子要素があります。それぞれ、プレゼンテーション記述 XML の <Series> 要素にマップされます。
各 <MeasureCollection> 子要素には、カテゴリ (水平) 軸の各値に対応する系列 (垂直) 軸値に対応する <Measure> という要素があります。

例

データ記述 XML 文字列の例を次に示します。

<datadefinition>  
  <fetchcollection>  
    <fetch mapping="logical" count="10">  
      <entity name="opportunity">  
        <attribute name="estimatedvalue" />  
        <order attribute="estimatedvalue" descending="true" />  
      </entity>  
    </fetch>  
  </fetchcollection>  
  <categorycollection>  
    <category>  
      <measurecollection>  
        <measure alias="estimatedvalue" />  
      </measurecollection>  
    </category>  
  </categorycollection></datadefinition>

データ記述 XML 文字列のその他の例については、「サンプルグラフ」を参照してください。

プレゼンテーション記述 XML 文字列を使用してデータプレゼンテーションを指定する

プレゼンテーション記述 XML 文字列には、グラフタイトル、グラフの色、グラフの種類 (横棒、縦棒、折れ線など) など、グラフの外観に関する情報が含まれます。この XML 文字列に対するスキーマ定義はありません。ただし XML はシリアル化された Microsoft Chart Controls における Chart class です。詳細: グラフコントロール

グラフを作成する際に、組織所有のグラフまたはユーザー所有のグラフでそれぞれ SavedQueryVisualization.PresentationDescription や UserQueryVisualization.PresentationDescription を使用してプレゼンテーション記述 XML 文字列を指定できます。

重要

統一インターフェイスでは、プロパティのサブセットのみがサポートされています。詳細: 統一インターフェイスでサポートされているメソッドとプロパティ

Web クライアントの例

Web クライアントのプレゼンテーション記述 XML 文字列の例を次に示します。

<Chart Palette="BrightPastel">  
  <Series>  
    <Series _Template_="All" Color="153, 204, 255" BorderColor="164, 164, 164" BorderDashStyle="Solid" BorderWidth="1" ShadowColor="128, 128, 128, 128" ShadowOffset="1" IsValueShownAsLabel="true" Font="{0}, 6.75pt" BackGradientStyle="TopBottom" BackSecondaryColor="0, 102, 153" LabelForeColor="100, 100, 100" ChartType="Column">  
      <SmartLabelStyle Enabled="True" />  
      <Points />  
    </Series>  
  </Series>  
  <ChartAreas>  
    <ChartArea _Template_="All" BackColor="White" BorderColor="26, 59, 105" BorderWidth="0" BorderDashStyle="Solid">      <AxisY LineColor="204, 204, 204" TitleFont="{0}, 8pt, GdiCharSet=0" TitleForeColor="100, 100, 100" LabelAutoFitMaxFontSize="7" LabelAutoFitMinFontSize="7">  
        <MajorTickMark LineColor="Gray" />  
        <MajorGrid Enabled="false" />  
        <LabelStyle Font="{0}, 6.75pt, GdiCharSet=0" ForeColor="100, 100, 100" />  
      </AxisY>  
      <AxisX LineColor="204, 204, 204" TitleFont="{0}, 8pt, GdiCharSet=0" TitleForeColor="100, 100, 100" LabelAutoFitMaxFontSize="7" LabelAutoFitMinFontSize="7">        <MajorTickMark LineColor="Gray" />        <MajorGrid Enabled="false" />  
        <LabelStyle Font="{0}, 6.75pt, GdiCharSet=0" ForeColor="100, 100, 100" />  
      </AxisX>  
    </ChartArea>  
  </ChartAreas>  
  <Titles>  
    <Title _Template_="All" Font="{0}, 9pt, style=Bold, GdiCharSet=0" ForeColor="100, 100, 100"></Title>  
  </Titles>  
  <BorderSkin PageColor="Control" BackColor="CornflowerBlue" BackSecondaryColor="CornflowerBlue" />  
</Chart>

プレゼンテーション記述 XML 文字列のその他の例については、「サンプルグラフ」を参照してください。

統一インターフェイスでサポートされているメソッドとプロパティ

次のセクションでは、統一インターフェイスでサポートされているメソッドとプロパティを示します。

AxisX

シリーズの X 軸タイプを取得または設定します。

プロパティ

プロパティ名	内容
有効	軸が有効にされているかどうかを示す値を取得または設定します。
LabelStyle が有効	ラベルが有効にされているかどうかを示すフラグを取得または設定します。
LabelStyle ForeColor	ラベルの色を取得または設定します。
LabelStyle 形式	ラベルテキストの書式設定文字列を取得または設定します。詳細: グラフでサポートされている数値形式
LineColor	軸の線色を取得または設定します。詳細: サポートされている色形式
IsReversed	軸が元に戻されているかどうかを示すフラグを取得または設定します。 True に設定すると、x 軸に 2 つの効果があります。 - x 軸のラベルが逆の順序で反転します (右から左へ) - また、Y 軸を反対側に移動して、上から右から左の X 軸ラベルに対応します。
MajorGrid が有効	主グリッド線または副グリッド線が有効かどうかを決定するフラグを取得または設定します。
MajorGrid LineColor	グリッドの線色を取得または設定します。詳細: サポートされている色形式
MajorTickMark が有効	主グリッド線または副グリッド線が有効かどうかを決定するフラグを取得または設定します。
MajorTickMark LineColor	グリッドの線色を取得または設定します。
タイトル	軸のタイトルを取得または設定します。
TitleForeColor	軸タイトルのテキスト色を取得または設定します。詳細: サポートされている色形式

ヒント

LABELS が多すぎる場合、HighChartsは 2 つ目のラベルごとに省略し、レンダリングを再試行します。簡単な回避策は、レコードを削除するか、ブラウザをズームアウトすることです。

例

 <AxisX Enabled="True" LineColor="165, 172, 181" Title="Test XAxis Title" TitleForeColor="91,151,213" IsReversed="true">
    <MajorTickMark LineColor="165, 172, 181" Enabled="true" />
    <MajorGrid LineColor="green" Enabled="true"/>
    <LabelStyle ForeColor="red" Format="#,0,.##K" Enabled="true" />
 </AxisX>

AxisY

シリーズの Y 軸タイプを取得または設定します。

プロパティ

プロパティ名	内容
AxisY2	2 番目の Y 軸を表す軸オブジェクトを取得または設定します。 - 2 番目の Y 軸は、複数の系列グラフにのみ適用されます。 - グラフエディターで複数の系列グラフを作成する場合、規定では、`YAxisType=Secondary` プロパティが自分のグラフの第 2 シリーズに追加され、`AxisY2` ノードが XML に追加されます。 - 別のシリーズを 2 番目の Y 軸で測定する場合は、`YAxisType=Secondary` をその系列ノードに移動できます。 - 2 番目の Y 軸が不要な場合は、`YAxisType=Secondary` を削除できます。 - Y 軸 (1 番目または 2 番目) が複数のシリーズを測定する場合、Y 軸のタイトルはどのシリーズを表示するかわからないため、タイトルはその Y 軸に追加されません。
有効	軸が有効にされているかどうかを示す値を取得または設定します。
間隔	軸の間隔を取得または設定します。
LabelStyle が有効	ラベルが有効にされているかどうかを示すフラグを取得または設定します。
LabelStyle ForeColor	ラベルの色を取得または設定します。
LabelStyle 形式	ラベルテキストの書式設定文字列を取得または設定します。詳細: グラフでサポートされている数値形式
LineColor	軸の線色を取得または設定します。詳細: サポートされている色形式
MajorGrid が有効	主グリッド線または副グリッド線が有効かどうかを決定するフラグを取得または設定します。
MajorGrid LineColor	グリッドの線色を取得または設定します。詳細: サポートされている色形式
MajorTickMark が有効	主グリッド線または副グリッド線が有効かどうかを決定するフラグを取得または設定します。
MajorTickMark LineColor	グリッドの線色を取得または設定します。
最大値	軸の最大値を取得または設定します。
最小値	軸の最小値を取得または設定します。
タイトル	軸のタイトルを取得または設定します。
TitleForeColor	軸タイトルのテキスト色を取得または設定します。詳細: サポートされている色形式

例

<AxisY Enabled="True" LineColor="165, 172, 181" Title="Test YAxis Title" TitleForeColor="91,151,213" Interval="1" Minimum="0" Maximum="5">
  <MajorTickMark LineColor="165, 172, 181" Enabled="true" />
  <MajorGrid LineColor="green" Enabled="true"/>
  <LabelStyle ForeColor="red" Enabled="true" />
</AxisY>
<AxisY2 Enabled="True" LineColor="165, 172, 181" Title="Test YAxis2 Title" TitleForeColor="91,151,213" Interval="10" Minimum="0" Maximum="100">
  <MajorTickMark LineColor="165, 172, 181" Enabled="true" />
  <MajorGrid LineColor="green" Enabled="true"/>
  <LabelStyle ForeColor="red" Enabled="true" />
</AxisY2>

グラフ

グラフのルートクラス。

プロパティ

プロパティ名内容

PaletteCustomColor カスタムパレットのカスタム配列を取得または設定します。以下に示すように、優先順位に従います。
- Series ノードで定義された色をレンダリングします。
- カラーパレットが指定されている場合、グラフはカラーパレットから色を選択します。
- 何も指定されていない場合は、既定のカラーパレットが使用されます。詳細: サポートされている色形式

プロパティ名	内容
PaletteCustomColor	カスタムパレットのカスタム配列を取得または設定します。以下に示すように、優先順位に従います。 - `Series` ノードで定義された色をレンダリングします。 - カラーパレットが指定されている場合、グラフはカラーパレットから色を選択します。 - 何も指定されていない場合は、既定のカラーパレットが使用されます。詳細: サポートされている色形式

例

<Chart Palette="None" PaletteCustomColors="91, 151, 213; #4169E1, red, 127,97,142,206">

ChartArea

グラフ画像のグラフ領域を表します。

プロパティ

プロパティ名	内容
Area3DStyle Enable3D	フラグがグラフ領域の 3D のオンとオフを切り替えるかどうかを示す値を取得または設定します。次の 3D グラフの種類をサポートしています: - 3D 列 - 3D 棒グラフ - 3D 積み上げ縦棒グラフ - 3D 積み重ね棒グラフ - 3D 積み上げ縦棒グラフ 100 - 3D 積み重ね棒グラフ 100 - 3D 円グラフ
BackColor	ユーザーがプロットの背景を単色またはグラデーション色に設定できるようにします。詳細: サポートされている色形式
BackSecondaryColor	ユーザーがプロットの背景を単色またはグラデーション色に設定できるようにします。詳細: サポートされている色形式
BackGradientStyle	ユーザーがプロットの背景を単色またはグラデーション色に設定できるようにします。

例

<ChartArea BackColor="orange" BackSecondaryColor="purple" BackGradientStyle="LeftRight" >
  <Area3DStyle Enable3D="true" />
</ChartArea>

凡例

チャート画像の凡例を表します。

プロパティ

プロパティ名	内容
有効	凡例を有効にするかどうかを定義します。既定では、 `True` に設定されています。

例

<Legends>
  <Legend Enabled="True"/>
</Legends>

系列

データポイントと系列を格納します。

プロパティ

プロパティ名	内容
BorderColor	データ境界線の色を取得または設定します。詳細: サポートされている色形式
BorderWidth	データポイントの境界線の幅を取得または設定します。
ChartType	シリーズを表すために使用されるグラフの種類を示す列挙値。既定の値は列です。次のグラフの種類をサポートしています。 - 列 - StackedColumn - StackedColumn100 - 横棒 - StackedBar - StackedBar100 - エリア - StackedArea - StackedArea100 - LINE - 円 - じょうご - タグ - ドーナツ - ポイント
Color	データポイントの色を取得または設定します。じょうごグラフと円グラフの場合、系列ノードで定義された色プロパティは無視されますが、カラーパレットからグラフの色が選択されます。詳細: サポートされている色形式
IsValueShownAsLabel	ラベルにデータポイントの値を表示するかどうかを示すフラグを取得または設定します。
CustomProperties	ユーザーが `FunnelNeckHeight` と `FunnelNeckWidth` 設定できるようにして、じょうごグラフの形状をカスタマイズします。 FunnelNeckHeight と FunnelNeckWidth はパーセンテージを表します。このパラメーターは、じょうごグラフタイプでのみサポートされています。
IsVisibleInLegend	アイテムが凡例に表示されるかどうかを示すフラグを取得または設定します。
LabelForeColor	ラベルのテキスト色を取得または設定します。詳細: サポートされている色形式
LabelFormat	データポイント食べるの形式を取得または設定します。詳細: グラフでサポートされている数値形式
LegendText	凡例の項目のテキストを取得または設定します。じょうごグラフと円グラフの場合、凡例には各データポイントの値がシリーズで表示されます。シリーズ名全体を表示する代わりに。
YAxisType	シリーズの Y 軸タイプを取得または設定します。 2 番目の X 軸ではなく、2 番目の Y 軸のみがサポートされています。

注意

現在、部分的に #PERCENT に対応しています。統一インターフェイスでは、 #VAL と #TOTAL には対応していません。
非比較グラフの場合、最大 5 つのシリーズ (1 つのカテゴリ) に対応しています。比較グラフについては、1 つのシリーズと 2 つのカテゴリのみに対応しています。

例

<Series>
  <Series ChartType="Column" Color="91, 151, 213" LegendText="Est Revenue" IsVisibleInLegend="True" BorderColor="red" BorderWidth="1" IsValueShownAsLabel="True" LabelFormat="$#,0,.##K" LabelForeColor="59, 59, 59">
  </Series>
  <Series ChartType="Column" Color="237, 125, 49" LegendText="Actual Revenue" IsVisibleInLegend="True" BorderColor="red" BorderWidth="1" IsValueShownAsLabel="True" LabelFormat="$#,0,.##K" LabelForeColor="59, 59, 59" YAxisType="Secondary">
  </Series>
</Series>

統一インターフェイスでサポートされるカラー形式

統一インターフェイスは、ウェブクライアントと互換性のあるグラフプレゼンテーション xml で次の色形式をサポートしています。

RGB 少数形式: 97,142,206
RGB HEX 形式: #4169E1
ARGB 少数形式: 127,90,138,57
ブラウザが認識する名前のついた色: 赤、透明

統一インターフェイスのグラフでサポートされる数値形式

書式設定スタイル	内容
`#,0`	スケーリングなし、小数なし、行間ゼロ
`#,0,.##K`	千、小数点以下 2 桁まで、行間ゼロ
`#,0,,.##M`	百万、小数点以下 2 桁まで、行間ゼロ
`#,0,,,.##B`	10 億、小数点以下 2 桁まで、行間ゼロ
`C`	既定の小数値を持つ通貨
`C0`	小数点以下なしの通貨
`C2`	小数以下 2 桁を持つ通貨
`F0`	定点
`#,0;(#,0);' '`	スケーリングなし、小数点以下なし、行間ゼロ、負の値は中括弧内、ゼロを表示しない
`#,0,.##K;(#,0,.##K);' '`	千、小数点以下 2 桁まで、先頭ゼロ付きで負の値は中括弧内、ゼロを表示しない
`#,0,,.##M;(#,0,,.##M);' '`	百万、小数点以下 2 桁まで、先頭ゼロ付きで負の値は中括弧内、ゼロを表示しない
`#,0,,,.##B;(#,0,,,.##B);' '`	10 億、小数点以下 2 桁まで、先頭ゼロ付きで負の値は中括弧内、ゼロを表示しない
`%`	形式文字列内のパーセント記号 (%) により、形式設定前に数値が 100 倍になります

次の方法で共有

グラフの理解: 基盤となるデータとグラフ表現

データ記述 XML 文字列を使用してグラフデータを指定する

<FetchCollection> 要素

<CategoryCollection> 要素

例

プレゼンテーション記述 XML 文字列を使用してデータプレゼンテーションを指定する

Web クライアントの例

統一インターフェイスでサポートされているメソッドとプロパティ

AxisX

AxisY

グラフ

ChartArea

凡例

系列

統一インターフェイスでサポートされるカラー形式

統一インターフェイスのグラフでサポートされる数値形式

関連項目

その他のリソース

次の方法で共有

グラフの理解: 基盤となるデータとグラフ表現

データ記述 XML 文字列を使用してグラフ データを指定する

<FetchCollection> 要素

<CategoryCollection> 要素

例

プレゼンテーション記述 XML 文字列を使用してデータ プレゼンテーションを指定する

Web クライアントの例

統一インターフェイスでサポートされているメソッドとプロパティ

AxisX

AxisY

グラフ​​

ChartArea

凡例

系列

統一インターフェイスでサポートされるカラー形式

統一インターフェイスのグラフでサポートされる数値形式

関連項目

その他のリソース

データ記述 XML 文字列を使用してグラフデータを指定する

プレゼンテーション記述 XML 文字列を使用してデータプレゼンテーションを指定する

グラフ