ComponentOne Studio MVC4 Classic ヘルプ
対数ゲージの作成
MVC Classic ウィジェット > Gauge ウィジェット > Wijradialgauge > 対数ゲージの作成

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

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

  1. ASP.NET MVC 4 Wijmo アプリケーション を作成します。
  2. ソリューションエクスプローラに移動し、Views フォルダ内部のShared フォルダを展開し、_Layout をダブルクリックしてファイルを開きます。
  3. ページの <body> タグ内の @RenderBody() のすぐ後に、次のマークアップを追加します。
    ソースビュー
    コードのコピー 
    <div id="gauge"></div>
<div class="options">
   <input type="checkbox" id="checkbox1" checked="checked" />
   <label for="checkbox1">IsLogarithmic</label>
</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: "auto",
       islogarithmic: true,
       origin: {
           x: 0.5, y: 0.5
       },
       labels: {
           offset: 27, //4F6B82
           style: {
           fill: "#1E395B",
           "font-size": "12pt",
           "font-weight": "800"
           }
       },
       tickMinor: {
           position: "inside",
           offset: 30,
           style: {
           "height": "3px",
           "width": "10px",
           fill: "#1E395B",
           stroke: "#E7EFF8"
           },
           interval: 5,
           visible: true
       },
       tickMajor: {
           position: "inside",
           offset: 27,
           style: {
           fill: "#1E395B",
           "height": "4px",
           "width": "20px",
           stroke: "#E7EFF8",
           "stroke-width": "1.5"
           },
           interval: 25,
           visible: true
       },
       ranges: [
       {
           startWidth: 2,
           endWidth: 5,
           startValue: 0,
           endValue: 10,
           startDistance: 0.6,
           endDistance: 0.58,
           style: {
           fill: "#7BA0CC",
           stroke: "#7BA0CC",
           "stroke-width": "0"
           }
       },
       {
           startWidth: 5,
           endWidth: 20,
           startValue: 10,
           endValue: 125,
           startDistance: 0.58,
           endDistance: 0.54,
           style: {
           fill: "0-#B4D5F0-#B4D5F0",
           stroke: "#FFFFFF",
           "stroke-width": "0"
           }
       },
       {
           startWidth: 20,
           endWidth: 25,
           startValue: 125,
           endValue: 150,
           startDistance: 0.54,
           endDistance: 0.5,
           style: {
           fill: "#7BA0CC",
           stroke: "#7BA0CC",
           "stroke-width": "0"
           }
       }
       ],
       face: {
           style: {
           fill: "r(0.9, 0.60)#FFFFFF-#D9E3F0",
           stroke: "#7BA0CC",
           "stroke-width": "4"
           }
       },
       pointer: {
           length: 0.8,
           offset: 0,
           shape: "rect",
           width: 6,
           style: {
           fill: "#1E395B",
           stroke: "#1E395B"
           }
       },
       cap: {
           radius: 10,
           style: {
           fill: "#1E395B",
           stroke: "#1E395B"
           }
       }
       });
       $("#checkbox1").change(function () {
       $("#gauge").wijradialgauge("option", "islogarithmic", $(this).is(":checked"));
       });
   });    
</script>

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

このトピックの作業結果

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

関連トピック
実行時の放射状ゲージのマージンの設定

 

 

Copyright © GrapeCity inc. All rights reserved.