手順 2：C1BarChart コントロールの作成

この手順では、C1BarChart コントロールを作成するマークアップを追加します。

Main.aspx ページのソースビューが開いていない場合はこれを開き、<body> タグに移動します。

C1BarChart コントロールを作成するマークアップを挿入するために、次のコードをページの先頭に追加して、C1Chart アセンブリを登録します。

ソースビュー	コードのコピー
<%@ Register assembly="C1.Web.Wijmo.Controls.4" namespace="C1.Web.Wijmo.Controls.C1Chart" TagPrefix="cc1" %>

タグセット内にある <div> タグセットを見つけて、その中に次のマークアップを挿入します。

ソースビュー	コードのコピー
<cc1:C1BarChart ID="C1BarChart1" runat="server" Horizontal="false" > <Header Text="Order Details"></Header> <TextStyle Fill-Color="#b2b2b2" FontWeight="bold" FontSize="15"></TextStyle> <SeriesHoverStyles> <cc1:ChartStyle StrokeWidth="1.5" Opacity="1" ></cc1:ChartStyle> </SeriesHoverStyles> <Axis> <X> <Labels> <Style Fill-Color="#7f7f7f" FontSize="11"></Style> </Labels> </X> <Y Compass="West"> <GridMajor> <Style Stroke="#353539" StrokeDashArray="-"></Style> </GridMajor> <Labels> <Style Fill-Color="#242529" FontSize="11"></Style> </Labels> </Y> </Axis> </cc1:C1BarChart>

ソースビュー

コードのコピー

<cc1:C1BarChart ID="C1BarChart1" runat="server" Horizontal="false" >
             <Header Text="Order Details"></Header>
            <TextStyle Fill-Color="#b2b2b2" FontWeight="bold" FontSize="15"></TextStyle>
            <SeriesHoverStyles>
                <cc1:ChartStyle StrokeWidth="1.5" Opacity="1" ></cc1:ChartStyle>
            </SeriesHoverStyles>
            <Axis>
                <X>
                    <Labels>
                        <Style Fill-Color="#7f7f7f" FontSize="11"></Style>
                    </Labels>
                </X>
                <Y Compass="West">
                    <GridMajor>
                        <Style Stroke="#353539" StrokeDashArray="-"></Style>
                    </GridMajor>
                    <Labels>
                        <Style Fill-Color="#242529" FontSize="11"></Style>
                    </Labels>
                </Y>
            </Axis>
        </cc1:C1BarChart>

C1BarChart マークアップのすぐ下に、次のコードを追加します。

ソースビュー	コードのコピー
<asp:HiddenField ID="HiddenField1" runat="server" ClientIDMode="Static" />

アプリケーションに追加したマークアップの全体は次のようになります。

ソースビュー	コードのコピー
<body> <form id="form1" runat="server"> <div> <cc1:C1BarChart ID="C1BarChart1" runat="server" Horizontal="false" > <Header Text="Order Details"></Header> <TextStyle Fill-Color="#b2b2b2" FontWeight="bold" FontSize="15"></TextStyle> <SeriesHoverStyles> <cc1:ChartStyle StrokeWidth="1.5" Opacity="1" ></cc1:ChartStyle> </SeriesHoverStyles> <Axis> <X> <Labels> <Style Fill-Color="#7f7f7f" FontSize="11"></Style> </Labels> </X> <Y Compass="West"> <GridMajor> <Style Stroke="#353539" StrokeDashArray="-"></Style> </GridMajor> <Labels> <Style Fill-Color="#242529" FontSize="11"></Style> </Labels> </Y> </Axis> </cc1:C1BarChart> <asp:HiddenField ID="HiddenField1" runat="server" ClientIDMode="Static" /> </div> </form> </body>

ソースビュー

コードのコピー

この手順では、C1BarChart コントロールを作成するマークアップを追加しました。次の手順では、グラフデータを入力し、ドリルダウンアクションを制御するスクリプトを追加します。