このトピックでは、コンポジットチャートにドーナツ円グラフを作成する方法について説明します。これは、関連するデータを含む２つの円グラフを組み合わせた特殊なグラフタイプです。この２つの円グラフは、きれいに重なるように共通の中心点を持ち、外側と内側の円グラフに分かれるように半径のプロパティが異なります。

デザイナの場合

C1CompositeChartに共有円グラフを追加するには、次の手順に従います。

1. C1CompositeChartのスマートタグをクリックして、［C1CompositeChartのタスク］メニューを開きます。
2. SeriesListをクリックして、CompositeChartSeriesコレクションエディタを開きます。

3. CompositeChartSeriesコレクションエディタで、［追加］ボタンを２回クリックして、CompositeChartに２つのCompositeChartSeriesを追加します。プロパティを次のように設定します。

   メンバ	Type	Label	Center	Radius
   0	Pie	Browser	200, 200	200
   1	Pie	Usage	200, 200	100

4. 最初の系列を選択し、PieSeriesListの横にある省略符ボタンをクリックしてPieChartSeriesコレクションエディタを開きます。

5. PieChartSeriesコレクションエディタで、［追加］ボタンを５回クリックして、最初のSharedPieChartSeriesに５つのPieChartSeriesを追加します。プロパティを次のように設定します。
   

   メンバ	Label	Data
   0	Chrome	38
   1	Firefox	36
   2	IE	13
   3	Safari	8
   4	Others	5

6. ２番目の系列を選択し、PieSeriesListの横にある省略符ボタンをクリックしてPieChartSeriesコレクションエディタを開きます。

7. PieChartSeriesコレクションエディタで、［追加］ボタンを10回クリックして、最初のSharedPieChartSeriesに10のPieChartSeriesを追加します。プロパティを次のように設定します。
   

   メンバ	Label	Data
   0	15	26
   1	14	8
   2	-	4
   3	7	20
   4	8	10
   5	-	6
   6	9	6
   7	8	5
   8	-	2
   9	5	2
   10	-	20

8. ［OK］をクリックして保存し、PieChartSeriesコレクションエディタを閉じます。

9. 最後に、［OK］をクリックして保存し、CompositeChartSeriesコレクションエディタを閉じます。

ソースビューの場合

<cc1:C1CompositeChart></cc1:C1CompositeChart>タグの間に次のコードを追加して、コンポジットチャートにドーナツ円グラフ系列を追加します。

<SeriesList>
<cc1:CompositeChartSeries Center="200, 200" LegendEntry="True" Radius="200" Type="Pie">
        <PieSeriesList>
                <cc1:PieChartSeries Data="38" HintContent="" Label="Chrome" LegendEntry="True">
                </cc1:PieChartSeries>
                <cc1:PieChartSeries Data="36" HintContent="" Label="Firefox" LegendEntry="True">
                </cc1:PieChartSeries>
                <cc1:PieChartSeries Data="13" HintContent="" Label="IE" LegendEntry="True">
                </cc1:PieChartSeries>
                <cc1:PieChartSeries Data="8" HintContent="" Label="Safari" LegendEntry="True">
                </cc1:PieChartSeries>
                <cc1:PieChartSeries Data="5" HintContent="" Label="Other" LegendEntry="True">
                </cc1:PieChartSeries>
        </PieSeriesList>
</cc1:CompositeChartSeries>
<cc1:CompositeChartSeries Center="200, 200" LegendEntry="True" Radius="100" Type="Pie">
        <PieSeriesList>
                <cc1:PieChartSeries Data="26" HintContent="" Label="15" LegendEntry="True">
                </cc1:PieChartSeries>
                <cc1:PieChartSeries Data="8" HintContent="" Label="14" LegendEntry="True">
                </cc1:PieChartSeries>
                <cc1:PieChartSeries Data="4" HintContent="" Label="" LegendEntry="True">
                </cc1:PieChartSeries>
                <cc1:PieChartSeries Data="20" HintContent="" Label="7" LegendEntry="True">
                </cc1:PieChartSeries>
                <cc1:PieChartSeries Data="10" HintContent="" Label="8" LegendEntry="True">
                </cc1:PieChartSeries>
                <cc1:PieChartSeries Data="6" HintContent="" Label=" " LegendEntry="True">
                </cc1:PieChartSeries>
                <cc1:PieChartSeries Data="6" HintContent="" Label="9" LegendEntry="True">
                </cc1:PieChartSeries>
                <cc1:PieChartSeries Data="5" HintContent="" Label="8" LegendEntry="True">
                </cc1:PieChartSeries>
                <cc1:PieChartSeries Data="2" HintContent="" Label=" " LegendEntry="True">
                </cc1:PieChartSeries>
                <cc1:PieChartSeries Data="5" HintContent="" Label="5" LegendEntry="True">
                </cc1:PieChartSeries>
                <cc1:PieChartSeries Data="3" HintContent="" Label=" " LegendEntry="True">
                </cc1:PieChartSeries>
                <cc1:PieChartSeries Data="5" HintContent="" Label=" " LegendEntry="True">
                </cc1:PieChartSeries>
        </PieSeriesList>
</cc1:CompositeChartSeries>
</SeriesList>

このトピックの作業結果

次の図は、コンポジットチャートに追加されたDonut PieChartを示します。