以下の手順は、設計時に、およびソースコードを使用して、C1Compositeチャートに共有円グラフを作成する方法を示します。これは、同じキャンバス上で複数の円グラフを使用して関連するデータを表示することができるグラフタイプです。これらの円グラフの凡例は共通です。この例の複数の円グラフは、2010年と2014年における主要なブラウザの使用率を示します。左側の円グラフには、2010年のブラウザの使用率データを表示します。右側の円グラフには、2014年のブラウザの使用率データを表示します。

デザイナの場合

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

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

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

   Type	Label	Center
   SharedPie	A New SharedPie	150, 150

4. SharedPieSeriesListの横にある省略符ボタンをクリックしてSharedPieChartSeriesコレクションエディタを開きます。

5. ［追加］ボタンを２回クリックして、２つの新しいSharedPieChartSeriesをCompositeChartに追加します。
6. 最初の系列のlabelを2010に、centerを150,150に設定します。
7. ２番目の系列のlabelを2014に、centerを300,150に設定します。
8. 最初のSharedPieChart系列を選択し、PieSeriesListの横にある省略符ボタンをクリックしてPieChartSeriesコレクションエディタを開きます。

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

   メンバ	Label	Data
   0	Chrome	6.04
   1	Firefox	31.64
   2	IE	55.25

10. 同様に、２番目のSharedPieChartSeriesに３つのPieChartSeriesを追加し、各プロパティを次のように設定します。
    

    メンバ	Label	Data
    0	Chrome	43.67
    1	Firefox	23.18
    2	IE	20.25

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

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

ソースビューの場合

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

 <SeriesList>
     <cc1:CompositeChartSeries Label="A new SharedPie" LegendEntry="True" Type="SharedPie">
         <CandlestickSeries LegendEntry="True">
          </CandlestickSeries>
         <SharedPieChartSeries>
             <cc1:CompositeSharedPieSeries LegendEntry="True" Center="150,150" Label="2010">
                 <PieSeriesList>
                    <cc1:PieChartSeries Data="46.78" Label="Chrome" LegendEntry="True">
                     </cc1:PieChartSeries>
                     <cc1:PieChartSeries Data="23.18" Label="Firefox" LegendEntry="True">
                     </cc1:PieChartSeries>
                     <cc1:PieChartSeries Data="20.25" Label="IE" LegendEntry="True">
                     </cc1:PieChartSeries>
                 </PieSeriesList>
             </cc1:CompositeSharedPieSeries>
             <cc1:CompositeSharedPieSeries LegendEntry="True" Center="300,150" Label="2014">
                 <PieSeriesList>
                     <cc1:PieChartSeries Data="23.6" Label="Chrome" LegendEntry="True">
                     </cc1:PieChartSeries>
                     <cc1:PieChartSeries Data="18.9" Label="Firefox" LegendEntry="True">
                     </cc1:PieChartSeries>
                     <cc1:PieChartSeries Data="22.85" Label="IE" LegendEntry="True">
                      </cc1:PieChartSeries>
                 </PieSeriesList>
             </cc1:CompositeSharedPieSeries>
         </SharedPieChartSeries>
     </cc1:CompositeChartSeries>
 </SeriesList>

このトピックの作業結果

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