CompositeChart for ASP.NET Web forms
手順 2:複数のグラフタイプの追加
クイックスタート > 手順 2:複数のグラフタイプの追加

 この手順では、CompositeChartSeries コレクション エディターを使用して縦棒、折れ線、および円の各グラフに複数の系列を作成し、プログラムによって CompositeChartSeries を作成して系列のマーカとラベルをカスタマイズします。

  1. CompositeChart スマートタグをクリックし、[C1CompositeChart タスク]メニューから シリーズ一覧 を選択します。 The CompositeChartSeries コレクション エディターが表示されます。
  2. CompositeChartSeries コレクション エディターで、〈追加〉ボタンを3回クリックして、新しい CompositeChartSeries を CompositeChart に追加します。
  3. メンバを選択し、CompositeChartSeries に以下のプロパティを設定します。

     

    メンバ

    タイプ

    ラベル

    0

    Column

    西エリア

    1

    Column

    中央エリア

    2

    Column

    東エリア

  4. member[0] を選択し、Data ノードを拡張して Values プロパティの横にある〈...〉ボタンをクリックします。ChartXData コレクション エディターが表示されます。〈追加〉ボタンを5回クリックし、 5つの x 値を最初の CompositeChartSeries に追加します。各 ChartXData の StringValue を以下のように設定します。

     

    メンバ

    StringValue

    0

    デスクトップ

    1

    ノート

    2

    一体型

    3

    タブレット

    4

    携帯電話

  5. OK〉をクリックし、Data->Y を拡張して values プロパティの横にある〈...〉ボタンをクリックします。ChartYData コレクション エディターが表示されます。〈追加〉ボタンを5回クリックし、5つの y 値を最初の CompositeChartSeries に追加します。各 ChartYData の DoubleValue を以下のように設定します。

     

    メンバ

    DoubleValue

    0

    5

    1

    3

    2

    4

    3

    7

    4

    2

     

  6. 〈OK〉をクリックし、member[1] を選択して Data ノードを拡張し、Values プロパティの横にある〈...〉ボタンをクリックします。ChartXData コレクション エディターが表示されます。〈追加〉ボタンを5回クリックし、5つの x 値を2番目の CompositeChartSeries に追加します。各 ChartXData の StringValue を以下のように設定します。

     

    メンバ

    StringValue

    0

    デスクトップ

    1

    ノート

    2

    一体型

    3

    タブレット

    4

    携帯電話

     

  7. OK〉をクリックし、Data->Y を拡張して Values プロパティの横にある〈...〉ボタンをクリックします。ChartYData コレクション エディターが表示されます。〈追加〉ボタンを5回クリックし、5つの y 値を2番目の CompositeChartSeries に追加します。各 ChartYData の DoubleValue を以下のように設定します。

     

    メンバ

    DoubleValue

    0

    2

    1

    2

    2

    3

    3

    2

    4

    1

  8. 〈OK〉をクリックし、member[2] を選択して Data ノードを拡張し、Values プロパティの横にある〈...〉ボタンをクリックします。ChartXData コレクション エディターが表示されます。〈追加〉ボタンを5回クリックし、5つの x 値を3番目の CompositeChartSeries に追加します。各 ChartXData の StringValue を以下のように設定します。

     

    メンバ

    StringValue

    0

    デスクトップ

    1

    ノート

    2

    一体型

    3

    タブレット

    4

    携帯電話

     

  9. OK〉をクリックし、Data->Y を拡張して Values プロパティの横にある〈...〉ボタンをクリックします。ChartYData コレクション エディターが表示されます。〈追加〉ボタンを5回クリックし、5つの y 値を最初の CompositeChartSeries に追加します。各 ChartYData の DoubleValue を以下のように設定します。

     

    メンバ

    DoubleValue

    0

    3

    1

    4

    2

    4

    3

    2

    4

    5

  10. CompositeChartSeries コレクション エディターで、〈追加〉ボタンを1回クリックして、1つの CompositeChartSeries を CompositeChart に追加します。メンバのプロパティを以下のように選択します。

     

    メンバ

    タイプ

    ラベル

    中心

    3

    Pie

    abc

    150, 150

  11. PieSeriesList の横にある〈...〉ボタンをクリックして、PieChartSeries コレクション エディターを開きます。
  12. 追加〉を3回クリックして、3つの新しい PieChartSeries  を CompositeChart に追加した後、各メンバを以下のように設定します。

     

    メンバ

    ラベル

    データ

    オフセット

    0

    機種2

    46.78

    15

    1

    機種3

    23.18

    0

    2

    機種4

    20.25

    0

  13. OK〉をクリックして、CompositeChartSeries コレクション エディターで〈追加〉を2回クリックします。
  14. 各メンバを選択し、CompositeChartSeries に以下のプロパティを設定します。

    メンバ

    ラベル

    タイプ

    4

    米国

    Line

    5

    カナダ

    Line

     

  15. member[4] を選択し、Data ノードを拡張して Values プロパティの横にある〈...〉ボタンをクリックします。ChartXData コレクション エディターが表示されます。〈追加〉ボタンを5回クリックし、5つの x 値を最初の CompositeChartSeries に追加します。各 ChartXData の StringValue を以下のように設定します。

     

    メンバ

    StringValue

    0

    デスクトップ

    1

    ノート

    2

    一体型

    3

    タブレット

    4

    携帯電話

  16. OK〉をクリックし、Data->Y  を拡張して values プロパティの横にある〈...〉ボタンをクリックします。ChartYData コレクション エディターが表示されます。〈追加〉ボタンを5回クリックし、5つの y 値を最初の CompositeChartSeries に追加します。各 ChartYData の DoubleValue を以下のように設定します。

     

    メンバ

    DoubleValue

    0

    3

    1

    6

    2

    2

    3

    9

    4

    5

  17. member[5] を選択し、Data ノードを拡張して Values プロパティの横にある〈...〉ボタンをクリックします。ChartXData コレクション エディターが表示されます。〈追加〉ボタンを5回クリックし、5つの x 値を最初の CompositeChartSeries に追加します。各 ChartXData の StringValue を以下のように設定します。

    メンバ

    StringValue

    0

    デスクトップ

    1

    ノート

    2

    一体型

    3

    タブレット

    4

    携帯電話

  18. OK〉をクリックし、Data->Y を拡張して values プロパティの横にある〈...〉ボタンをクリックします。ChartYData コレクション エディターが表示されます。〈追加〉ボタンを5回クリックし、5つの y 値を最初の CompositeChartSeries に追加します。 各 ChartYData の DoubleValue を以下のように設定します。

    メンバ

    DoubleValue

    0

    1

    1

    3

    2

    4

    3

    7

    4

    2

関連トピック