CompositeChart for ASP.NET Web forms
スプライングラフの作成
タスク別ヘルプ > スプライングラフの作成

C1CompositeChartにスプライングラフを作成するには、次の手順を実行します。

デザイナの場合

C1CompositeChartのスマートタグをクリックして、[C1CompositeChartのタスク]メニューを開き、SeriesListを選択します。

  1. CompositeChartSeriesコレクションエディタで、[追加]ボタンを1回クリックして、CompositeChartに1つのCompositeChartSeriesを追加します。メンバのTypeプロパティをSplineに設定します。
  2. LabelWijmoに設定します。
  3. [データ->X]ノードを展開し、Valuesの横にある省略符ボタンをクリックします。
  4. [追加]を9回クリックし、CompositeChartSeriesに9つのChartXData値を追加します。
  5. メンバごとに、DateTimeValueを次のように設定します。

    メンバ

    DateTimeValue

    0

    12/10/2012

    1

    12/11/2012

    2

    12/12/2012

    3

    12/13/2012

    4

    12/14/2012

    5

    12/15/2012

    6

    12/16/2012

    7

    12/17/2012

    8

    12/18/2012

  6. [OK]をクリックして保存し、ChartXDataコレクションエディタを閉じます。
  7. [データ->Y]ノードを展開し、Valuesの横にある省略符ボタンをクリックします。
  8. [追加]を9回クリックし、CompositeChartSeriesに9つのChartYData値を追加します。
  9. メンバごとに、DoubleValueを次のように設定します。

    メンバ

    DoubleValue

    0

    12

    1

    30

    2

    6

    3

    20

    4

    14

    5

    25

    6

    40

    7

    12

     

    3

  10. [OK]をクリックして保存し、ChartYDataコレクションエディタを閉じます。
  11. [OK]をクリックして保存し、CompositeChartSeriesコレクションエディタを閉じます。
    曲線グラフを面グラフのように表示するには、スタイルを使用します。
  12. C1CompositeChartのスマートタグをクリックして、[C1CompositeChartのタスク]メニューを開き、SeriesStylesを選択します。ChartStyleコレクションエディタが表示されます。
  13. [追加]をクリックしてCompositeChartに1つのChartStyleを追加し、Strokeプロパティを#0066CCに、StrokeOpacity0.8に、StrokeWidth5に設定します。

ソースビューの場合

以下のコードを使用して、C1Compositeチャートにスプライングラフを作成します。

ソースビュー
コードのコピー
<cc1:C1CompositeChart ID="C1CompositeChart1" runat="server" Height="300px"
            Width="400px">
            <SeriesList>
                <cc1:CompositeChartSeries Label="Wijmo" LegendEntry="True" Type="Spline">
                    <Data>
                        <X>
                            <Values>
                                <cc1:ChartXData DateTimeValue="2012-12-10" />
                                <cc1:ChartXData DateTimeValue="2012-12-11" />
                                <cc1:ChartXData DateTimeValue="2012-12-12" />
                                <cc1:ChartXData DateTimeValue="2012-12-13" />
                                <cc1:ChartXData DateTimeValue="2012-12-14" />
                                <cc1:ChartXData DateTimeValue="2012-12-15" />
                                <cc1:ChartXData DateTimeValue="2012-12-16" />
                                <cc1:ChartXData DateTimeValue="2012-12-17" />
                                <cc1:ChartXData DateTimeValue="2012-12-18" />
                            </Values>
                        </X>
                        <Y>
                            <Values>
                                <cc1:ChartYData DoubleValue="12" />
                                <cc1:ChartYData DoubleValue="30" />
                                <cc1:ChartYData DoubleValue="6" />
                                <cc1:ChartYData DoubleValue="20" />
                                <cc1:ChartYData DoubleValue="14" />
                                <cc1:ChartYData DoubleValue="25" />
                                <cc1:ChartYData DoubleValue="40" />
                                <cc1:ChartYData DoubleValue="12" />
                                <cc1:ChartYData DoubleValue="3" />
                            </Values>
                        </Y>
                    </Data>
                </cc1:CompositeChartSeries>
            </SeriesList>
            <SeriesStyles>
                <cc1:ChartStyle Stroke="#0066CC" StrokeOpacity="0.8" StrokeWidth="5">
                </cc1:ChartStyle>
            </SeriesStyles>
     <Header Compass="North"></Header>
     <Footer Compass="South" Visible="False"></Footer>
     <Axis>
             <X>
                  <GridMajor Visible="True"></GridMajor>
                  <GridMinor Visible="False"></GridMinor>
             </X>
             <Y Visible="False" Compass="West">
                  <Labels TextAlign="Center"></Labels>
                  <GridMajor Visible="True"></GridMajor>
                  <GridMinor Visible="False"></GridMinor>
             </Y>
      </Axis>
</cc1:C1CompositeChart>

このトピックの作業結果

次の図は、スプライングラフを含むC1CompositeChartを示します。