BarChart for ASP.NET WebForms
手順 3：スクリプトの追加
クライアント側チュートリアル > BarChart データのドリルダウン > 手順 3：スクリプトの追加

この手順では、グラフにデータを入力するスクリプトを追加します。また、ドリルダウンアクションを制御するスクリプトも追加します。

  1. Main.aspx ファイルで <head></head> タグに移動します。このタグの中に、必要なスクリプトをすべて追加します。
  2. Wijmo のクライアント側への参照を <head> タグ内に追加します。
    ソースビュー
    コードのコピー
    <!--jQuery References-->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>
     
    <!--Theme-->
    <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />
     
    <!--Wijmo Widgets JavaScript-->
    <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20132.9.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.9.min.js" type="text/javascript"></script>
  3. 参照のすぐ下に、次のタグセットを追加します。
    ソースビュー
    コードのコピー
    <script type="text/javascript"></script>
  4. 前の手順で追加したタグセット内に、次のスクリプトを追加します。このスクリプトは、グラフに AJAX データを入力し、いくつかのグラフプロパティを設定します。また、エラー付きのステータスが返された場合に、警告を返します。
    ソースビュー
    コードのコピー
    $(document).ready(function ()
     
                //データを取得する ajax 呼び出し
                $.ajax({
                    type: "POST",
                    url: "GetOrders.asmx/GetDataOnLoad",
                    contentType: "application/json; charset=utf-8"
                    dataType: "json"
                    data: {},
                    success: function (data) {
                        var arr = [];
                        try
                            //データを配列にプッシュします
                            $.each(data.d, function (i, elem) {
                                arr.push({
                                    Year: elem.Year,
                                    OrderAmount: elem.OrderAmount
                                })
                            });
                            //barchart ウィジェットを初期化します
                            $("#C1BarChart1").c1barchart({
                                shadow: false,                           
                                hint: { content: function () { return this.data.label + '\n ' + this.y + ''; } },
                                //BarChart のデータソースを設定します
                                dataSource: arr,
                                seriesList: [{
                                    label: "Yearly Amount of Orders",
                                    legendEntry: true,
                                    data: { x: { bind: "Year" }, y: { bind: "OrderAmount" } }
                                }],
                                seriesStyles: [{ fill: "180-#ff9900-#ff6600", stroke: "#ff7800", opacity: 0.8 }],
                                });
                        }
                        catch (e) {
                            alert(e);
                            return;
                        }
     
                    }
                    error: function (result, status) {
                        if (status = "error") {
                            alert(status);
                        }
                    }
                });
  5. 次に、最初のドリルダウンレベルのクリックイベントを含むスクリプトを追加します。
    ソースビュー
    コードのコピー
    $("#C1BarChart1").c1barchart({
                    click: function (sender, args) {
     
                        //データを取得する ajax 呼び出し
                        $.ajax({
                            type: "POST",
                            url: "GetOrders.asmx/GetOrderByMonth",
                            contentType: "application/json; charset=utf-8"
                            dataType: "json",
                            //選択された年を渡します
                            data: "{Year:'" + args.x + "'}",
                            success: function (data) {
                                var arr = [];
                                try {
                                    //データを配列にプッシュします
                                    $.each(data.d, function (i, elem) {
                                        arr.push({
                                            Month: elem.Month,
                                            OrderAmount: elem.OrderAmount
                                        });
                                    });
                                    //BarChart のデータソースを設定します
                                    $("#C1BarChart1").c1barchart({
                                        horizontal: false,
                                        dataSource: arr,
                                        seriesList: [{
                                            label: "Orders By Month in year " + args.x,
                                            legendEntry: true
                                            data: { x: { bind: "Month" }, y: { bind: "OrderAmount" } }
                                        }],
                                        //クリックイベントに新しいハンドラを関連付けます
                                        click: OrdersByDay
                                    });
                                    //次のドリルダウンを実行するために、選択された年を保存します
                                    $("#HiddenField1")[0].value = args.x;
                                }
                                catch (e) {
                                    alert(e);
                                    return;
                                }
                            },
                            error: function (result, status) {
                                if (status = "error") {
                                    alert(status);
                                }
                            }
                        });

                    }
                });
            });
  6. 最後に追加するスクリプトは、グラフの最終的なドリルダウンレベルを制御します。このスクリプトは、クリックイベントに対して、適切なデータを呼び出してグラフに入力します。
    ソースビュー
    コードのコピー
    //日のレベルにドリルダウンするために月が選択されたときに呼び出されるメソッド
            function OrdersByDay(sender, args) {
     
                var year = $("#HiddenField1")[0].value;
                var month = args.x;
                //データを取得する ajax 呼び出し
                $.ajax({
                    type: "POST",
                    url: "GetOrders.asmx/GetOrderByDay",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: '{"Month":"' + month + '","Year":"' + year + '"}',
                    success: function (data) {
                        var arr = []
                        try {
                            //データを配列にプッシュします
                            $.each(data.d, function (i, elem) {
     
                                arr.push({
                                    Day: elem.Day
                                    OrderAmount: elem.OrderAmount
                                });
                            });
                            //BarChart のデータソースを設定します
                            $("#C1BarChart1").c1barchart("destroy")
                            $("#C1BarChart1").c1barchart({
                                shadow: false,
                                textStyle: { fill: "#b2b2b2", "font-weight": "bold", "font-size": 15 }
                               
                                    y: {
                                        labels: { style: { fill: "#242529", "font-size": 11 } },
                                        gridMajor: { style: { stroke: "#353539", "stroke-dasharray": "- " } }
                                    },
                                    x: {
                                        labels:
                                            style: { fill: "#7f7f7f", "font-size": 11 }
                                        }
                                    }
                                },
                                hint: { content: function () { return this.data.label + '\n ' + this.y + ''; } },
                                header: { text: "Order Details" },
                                horizontal: false,
                                dataSource: arr,
                                seriesList: [{
                                    label: "Orders By Days in Month " + month + "," + year,
                                    legendEntry: true,
                                    data: { x: { bind: "Day" }, y: { bind: "OrderAmount" } }
                                }],
                                seriesStyles: [{ fill: "180-#ff9900-#ff6600", stroke: "#ff7800", opacity: 0.8 }],
                                seriesHoverStyles: [{ "stroke-width": 1.5, opacity: 1 }]
                            });
                            $("#C1BarChart1").c1barchart("redraw");
                        }
                        catch (e) {
                            alert(e);
                            return;
                        }
                    },
     
                    error: function (result, status) {
                        if (status = "error") {

                        }
                    }
                })
     
            }

この手順では、グラフにデータを入力し、ドリルダウンアクションを制御するスクリプトを追加しました。次の手順では、アプリケーションを実行し、いくつかの実行時機能をテストします。

関連トピック
手順 4：アプリケーションの実行

 

 

Copyright © GrapeCity, Inc. All rights reserved.