BarChart for ASP.NET WebForms
手順３：スクリプトの追加
クライアント側チュートリアル > データを条件付きでロードする > 手順３：スクリプトの追加

この手順では、条件付きでデータをロードするためのスクリプトを追加します。

  1. 手順１で追加したクライアント側参照の下にカーソルを置きます。次のマークアップを追加します。
    ソースビュー
    コードのコピー 
    <script id="scriptInit" type="text/javascript">
    </script>
  2. 追加するスクリプトの最初のセクションでは、C1ComboBox にデータを挿入します。
    ソースビュー
    コードのコピー
    $(document).ready(function () { var staticSeries = []; var count = 0; $("#tagsinput").c1combobox( { selectedIndex: -1, data: [ { label: '西', value: '西' }, { label: '中央', value: '中央' }, { label: '東', value: '東' } ],
  3. スクリプトの次の部分では、selectedIndexChanging イベントを処理します。これにより、C1BarChart コントロールのデータが、選択された C1ComboBoxItem に基づいて変化します。
    ソースビュー
    コードのコピー 
    selectedIndexChanging: function (e, args) {
                    var color;
                    switch (args.newIndex) {
                        case 0: color = "Red"
                            break;
                        case 1: color = "Blue"
                            break;
                        case 2: color = "Orange"
                    };
                    count++;
                    var series = $("#C1BarChart1").c1barchart('option', 'seriesList')
                    if (count === 1) {
                        staticSeries = series;
                    }
                    staticSeries[args.newIndex].visible = true;
                    staticSeries[args.newIndex].legendEntry = true;
                    $("#C1BarChart1").c1barchart('option', 'seriesList', [staticSeries[args.newIndex]]);
                    $("#C1BarChart1").c1barchart({
                        hint: {
                            enable: true
                        },
                        seriesStyles: [{
                            fill: color, stroke: color
                        }]
                    });
                    $("#C1BarChart1").c1barchart('redraw');
                }
            });
  4. 追加するスクリプトの最後のセクションでは、C1BarChart コントロールのヒントと SeriesList データを作成します。
    ソースビュー
    コードのコピー 
    $("#C1BarChart1").c1barchart({
                    axis: {
                        y: {
                            text: "ハードウェアの合計"
                        },
                        x: {
                            text: ""
                        }
                    },
                    hint: {
                        enable: false,
                        content: function () {
                            return this.data.label + '\n ' + this.y + '';
                        },
                        compass: "south", offsetX: 0, offsetY: 0
                    },               
                    seriesList: [{
                        visible: false,
                        label: "West",
                        legendEntry: false,
                        data: { x: ['デスクトップ', 'ノートパソコン', 'AIO', 'タブレット', '携帯電話'], y: [5, 3, 4, 7, 2] }
                    }, {
                        visible: false,
                        label: "Central",
                        legendEntry: false,
                        data: { x: ['デスクトップ', 'ノートパソコン', 'AIO', 'タブレット', '携帯電話'], y: [2, 2, 3, 2, 1] }
                    }, {
                        visible: false,
                        label: "East",
                        legendEntry: false,
                        data: { x: ['デスクトップ', 'ノートパソコン', 'AIO', 'タブレット', '携帯電話'], y: [3, 4, 4, 2, 5] }
                    }]
                });
            });

    この手順では、C1ComboBox の selectedIndexChanging イベントを処理するスクリプトと、C1BarChart コントロールの Hint および SeriesList データを追加しました。次の手順では、このアプリケーションを実行します。

 

 

Copyright © GrapeCity, Inc. All rights reserved.