このトピックでは、コンポジットチャートにドーナツ円グラフを作成する方法について説明します。これは、関連するデータを含む2つの円グラフを組み合わせた特殊なグラフタイプです。この2つの円グラフは、きれいに重なるように共通の中心点を持ち、外側と内側の円グラフに分かれるように半径のプロパティが異なります。
C1CompositeChartに共有円グラフを追加するには、次の手順に従います。
CompositeChartSeriesコレクションエディタで、[追加]ボタンを2回クリックして、CompositeChartに2つのCompositeChartSeriesを追加します。プロパティを次のように設定します。
メンバ | Type | Label | Center | Radius |
---|---|---|---|---|
0 | Pie | Browser | 200, 200 | 200 |
1 | Pie | Usage | 200, 200 | 100 |
PieChartSeriesコレクションエディタで、[追加]ボタンを5回クリックして、最初のSharedPieChartSeriesに5つのPieChartSeriesを追加します。プロパティを次のように設定します。
メンバ | Label | Data |
---|---|---|
0 | Chrome | 38 |
1 | Firefox | 36 |
2 | IE | 13 |
3 | Safari | 8 |
4 | Others | 5 |
2番目の系列を選択し、PieSeriesListの横にある省略符ボタンをクリックしてPieChartSeriesコレクションエディタを開きます。
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 |
[OK]をクリックして保存し、PieChartSeriesコレクションエディタを閉じます。
<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を示します。