線形ゲージの向きの設定

wijlineargauge ウィジェットは、水平と垂直向きをサポートします。この機能を活用するには、orientation オプションを単に設定します。例については、MVC コントロールエクスプローラのライブデモで lineargauge > Orientation サンプル (http://demo.componentone.com/ASPNET/MVCExplorer/lineargauge/Orientation)を参照してください。

ASP.NET MVC 5 Wijmo アプリケーションを作成します。
ソリューションエクスプローラに移動し、Views フォルダ内部のShared フォルダを展開し、_Layout をダブルクリックしてファイルを開きます。

ページの<body> タグ内の @RenderBody()() のすぐ後に、次のマークアップを追加します。

ソースビュー	コードのコピー
<div id="gauge"></div> <div class="demo-options"> <select id="orientation"> <option>水平方向</option> <option>垂直方向</option> </select> </div>

前の手順で追加した </div>終了タグの後に、次の jQuery スクリプトを入力し、wijlineargauge ウィジェットを初期化して、orientation オプションを設定します。

ソースビュー	コードのコピー
<script type="text/javascript"> $(document).ready(function () { $("#gauge").wijlineargauge({ value: 50, labels: { style: { fill: "#1E395B", "font-size": "12pt", "font-weight": "800" } }, tickMajor: { position: "inside", interval: 20, style: { fill: "#1E395B", stroke: "none" } }, tickMinor: { position: "inside", visible: true, interval: 4, style: { fill: "#1E395B", stroke: "none" } }, pointer: { shape: "rect", length: 0.5, style: { fill: "#1E395B", stroke: "#1E395B" } }, face: { style: { fill: "270-#FFFFFF-#D9E3F0", stroke: "#7BA0CC", "stroke-width": "4" } } }); $("#orientation").change(function () { var orientation = $(this).val(); $("#gauge").wijlineargauge("option", "orientation", orientation); }); }); </script>

ソースビュー

コードのコピー

<script type="text/javascript"> 
    $(document).ready(function () { 
        $("#gauge").wijlineargauge({ 
            value: 50, 
            labels: { 
                style: { 
                fill: "#1E395B", 
                "font-size": "12pt", 
                "font-weight": "800" 
                } 
            }, 
            tickMajor: { 
                position: "inside", 
                interval: 20, 
                style: { 
                fill: "#1E395B", 
                stroke: "none" 
                } 
            }, 
            tickMinor: { 
                position: "inside", 
                visible: true, 
                interval: 4, 
                style: { 
                fill: "#1E395B", 
                stroke: "none" 
                } 
            }, 
            pointer: { 
                shape: "rect", 
                length: 0.5, 
                style: { 
                fill: "#1E395B", 
                stroke: "#1E395B" 
                } 
            }, 
            face: { 
                style: { 
                fill: "270-#FFFFFF-#D9E3F0", 
                stroke: "#7BA0CC", 
                "stroke-width": "4" 
                } 
            } 
        }); 
         $("#orientation").change(function () { 
            var orientation = $(this).val(); 
            $("#gauge").wijlineargauge("option", "orientation", orientation); 
        }); 
    }); 
</script>

実行時、ドロップダウンボックスを使用してゲージの向きを選択できます。

このトピックの作業結果

［F5］を押して、アプリケーションを実行します。ゲージが水平向き（デフォルト）に表示されることに注意してください。ゲージの向きを垂直に変更するには、ドロップダウンから vertical を選択します。