CompositeChart for ASP.NET Web forms
ドーナツ円グラフの作成
タスク別ヘルプ > ドーナツ円グラフの作成

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

デザイナの場合

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

  1. C1CompositeChartのスマートタグをクリックして、[C1CompositeChartのタスク]メニューを開きます。
  2. SeriesListをクリックして、CompositeChartSeriesコレクションエディタを開きます。
  3. CompositeChartSeriesコレクションエディタで、[追加]ボタンを2回クリックして、CompositeChartに2つのCompositeChartSeriesを追加します。プロパティを次のように設定します。

    メンバ Type Label Center Radius
    0 Pie Browser 200, 200 200
    1 Pie Usage 200, 200 100
  4. 最初の系列を選択し、PieSeriesListの横にある省略符ボタンをクリックしてPieChartSeriesコレクションエディタを開きます。
  5. PieChartSeriesコレクションエディタで、[追加]ボタンを5回クリックして、最初のSharedPieChartSeriesに5つのPieChartSeriesを追加します。プロパティを次のように設定します。

    メンバ Label Data
    0 Chrome 38
    1 Firefox 36
    2 IE 13
    3 Safari 8
    4 Others 5
  6. 2番目の系列を選択し、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を示します。