対数ゲージの作成

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

ページャタイプを設定するには、以下の手順を実行します。

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

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

ソースビュー	コードのコピー
<div id="gauge"></div> <div class="options"> <input type="checkbox" id="checkbox1" checked="checked" /> <label for="checkbox1">IsLogarithmic</label> </div>

このマークアップによって、１つの線形ゲージウィジェットと１つのチェックボックスのコンテンツがページに追加されます。

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

ソースビュー	コードのコピー
<script type="text/javascript"> $(document).ready(function () { $("#gauge").wijlineargauge({ value: 50, islogarithmic: true, 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" } } }); $("#checkbox1").change(function () { $("#gauge").wijlineargauge("option", "islogarithmic", $(this).is(":checked")); }); }); </script>

ソースビュー

コードのコピー

<script type="text/javascript"> 
    $(document).ready(function () { 
        $("#gauge").wijlineargauge({ value: 50, 
            islogarithmic: true, 
            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" 
                } 
            } 
        }); 
 
        $("#checkbox1").change(function () { 
            $("#gauge").wijlineargauge("option", "islogarithmic", $(this).is(":checked")); 
        }); 
    }); 
</script>

チェックボックスが ON の場合、ゲージは対数スケールで値を表示します。チェックボックスが OFF の場合、値はデフォルトスケールで表示されます。

このトピックの作業結果

［F5］を押して、アプリケーションを実行します。チェックボックスが ON の場合はゲージが対数スケールで値を表示し、チェックボックスが OFF の場合は値がデフォルトスケールで表示されることに注意してください。