ComponentOne Studio MVC5 Classic ヘルプ
実行時の放射状ゲージの位置の設定
MVC Classic ウィジェット > Gauge ウィジェット > Wijradialgauge > 実行時の放射状ゲージの位置の設定

実行時に wijradialgauge ウィジェットのマージンを簡単に設定できます。例については、MVC コントロールエクスプローラのライブデモで radialgauge > Margin サンプル（http://demo.componentone.com/ASPNET/MVCExplorer/radialgauge/Margin）を参照してください。

マージンを設定するには、以下の手順を実行します。

  1. ASP.NET MVC 5 Wijmo アプリケーション を作成します。
  2. ソリューションエクスプローラに移動し、Views フォルダ内部のShared フォルダを展開し、_Layout をダブルクリックしてファイルを開きます。
  3. ページの <body> タグ内の @RenderBody() のすぐ後に、次のマークアップを追加します。
    ソースビュー
    コードのコピー 
    <div id="gauge"></div>
<div class="options"> 
    <p>pointer</p> 
    Length:<input id="p_length" type="text" /> 
    Offset:<input id="p_offset" type="text" /> 
    <p>label</p> 
    Offset:<input id="l_offset" type="text" /> 
    <p>tick</p> 
    Offset:<input id="t_offset" type="text" />
    Position:<select id="t_position"><option value="inside">Inside</option> 
        <option value="outside">Outside</option> 
    </select> 
    <p>range1</p> 
    start Distance<input id="rs_distance" type="text" /> 
    end Distance<input id="re_distance" type="text" /> 
    <br /> 
    <input id="applyOption" type="button" value="Apply" /> 
</div>

    このマークアップによって、１つの放射状ゲージウィジェットといくつかのテキストボックスが追加され、実行時に位置の設定が可能になります。次の手順では、ゲージを初期化します。

  4. 前の手順で追加した終了タグ</div>の後に、次の jQuery スクリプトを追加し、wijradialgauge ウィジェットを初期化します。
    ソースビュー
    コードのコピー 
    <script type="text/javascript"> 
    $(document).ready(function () { 
    $("#gauge").wijradialgauge({ 
        value: 100, 
        max: 150, 
        min: 0, 
        startAngle: -45, 
        sweepAngle: 270, 
        radius: 170, 
        islogarithmic: false, 
        origin: { 
        x: 0.5, y: 0.5 
        }, 
        labels: { 
        offset: -30, //4F6B82
        style: { 
            fill: "#556A7C", 
            stroke: "#556A7C" 
        } 
        }, 
        tickMinor: { 
        position: "inside", 
        style: { 
            fill: "#556A7C", 
            stroke: "#556A7C" 
        }, 
        interval: 2, 
        visible: true, 
        offset: 0 
        }, 
        tickMajor: { 
        position: "center", 
        style: { 
            fill: "#556A7C", 
            stroke: "#556A7C" 
        }, 
        interval: 10, 
        visible: true 
        }, 
        ranges: [{ 
        startWidth: 15, 
        endWidth: 20, 
        startValue: 20, 
        endValue: 50, 
        startDistance: 1, 
        endDistance: 1, 
        style: { 
            fill: "#BC8A8E", 
            stroke: "#BC8A8E" 
        } 
        } 
        ], 
        face: { 
        style: { 
            fill: "#E0E8EF", 
            stroke: "#E0E8EF" 
        } 
        }, 
        pointer: { 
        length: 1, 
        style: { 
            fill: "#BF551C", 
            stroke: "#BF551C" 
        } 
        }, 
        cap: { 
        style: { 
            fill: "#7F9CAD", 
            stroke: "#7F9CAD" 
        } 
        } 
    }); 
    $("#applyOption").click(function () { 
        var option = {}, pointer = {}, label = {}, tick = {}, range1 = {}; 
        pointer.length = getInputNum("p_length"); 
        pointer.offset = getInputNum("p_offset"); 
        label.offset = getInputNum("l_offset"); 
        tick.offset = getInputNum("t_offset"); 
        tick.position = $("#t_position").val(); 
        range1 = $("#gauge").wijradialgauge("option", "ranges")[0]; 
        range1.startDistance = getInputNum("rs_distance"); 
        range1.endDistance = getInputNum("re_distance"); 
        option.pointer = pointer; 
        option.labels = label; 
        option.tickMinor = tick; 
        option.tickMajor = tick; 
        option.ranges = []; 
        option.ranges[0] = range1; 
        $("#gauge").wijradialgauge("option", option); 
    }); 
    var getInputNum = function (id) { 
        var val = $("#" + id).val(); 
        return val ? parseInt(val) : undefined; 
    } 
    }); 
</script>

    実行時にゲージの位置を設定できます。

このトピックの作業結果

［F5］を押してアプリケーションを実行し、テキストボックスのそれぞれに値を入力して、〈適用〉ボタンをクリックします。ゲージの位置が指定した値に変わります。

 

 

Copyright © GrapeCity inc. All rights reserved.