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>
   <p>
       <label>MarginLeft:</label>
       <input type="text" id="txLeft" value="0" />
   </p>
   <p>
       <label>MarginRight:</label>
       <input type="text" id="txRight" value="0" />
   </p>
   <p>
       <label>MarginTop:</label>
       <input type="text" id="txTop" value="0" />
   </p>
   <p>
       <label>MarginBottom:</label>
       <input type="text" id="txBottom" value="0" />
   </p>
   <p>
       <input type="button" id="btnExec" value="Apply" />
   </p>
</div>

    このマークアップによって、１つの放射状ゲージウィジェットと４つのテキストボックスのコンテンツが追加されます。次の手順では、ゲージを初期化します。

  4. 前の手順で追加した終了タグ </div> の後に、次の jQuery スクリプトを追加し、wijradialgauge ウィジェットを初期化します。
    ソースビュー
    コードのコピー 
    <script type="text/javascript">
   $(document).ready(function () {
       $("#gauge").wijradialgauge({
           value: 100,
           max: 150,
           min: 0,
           startAngle: -45,
           sweepAngle: 270,
           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
           },
           face: {
               style: {
               fill: "#E0E8EF",
                   stroke: "#E0E8EF"
               }
           },
           pointer: {
               length: 1,
               style: {
               fill: "#BF551C",
                   stroke: "#BF551C"
               }
           },
           cap: {
               style: {
               fill: "#7F9CAD",
                   stroke: "#7F9CAD"
               }
           }
       });
       $("#btnExec").click(function () {
           $("#gauge").wijradialgauge("option", "marginLeft", parseInt($("#txLeft").val()));
           $("#gauge").wijradialgauge("option", "marginRight", parseInt($("#txRight").val()));
           $("#gauge").wijradialgauge("option", "marginTop", parseInt($("#txTop").val()));
           $("#gauge").wijradialgauge("option", "marginBottom", parseInt($("#txBottom").val()));
       })
   });
</script>
    実行時にゲージのマージンを設定できます。

このトピックの作業結果

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

 

 

 

Copyright © GrapeCity inc. All rights reserved.