線形ゲージの外観のカスタマイズ

wijlineargauge ウィジェットの外観は、簡単にカスタマイズできます。tickMajor、tickMinor、pointer、face の各オプションを単に設定するだけです。例については、MVC コントロールエクスプローラのライブデモで lineargauge > Level サンプル(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({ width: 400, height: 70, value: 50, tickMajor: { position: "center", factor: 3, offset: 5, style: { fill: "#efefef", stroke: "none" } }, tickMinor: { position: "center", visible: true, style: { fill: "#efefef", stroke: "none" } }, pointer: { length: .6, width: 8, style: { fill: "180-#FB7800-#C00100", stroke: "#FB7800", opacity: 0.8 } }, face: { style: { fill: "270-#C9C9C9-#A6A6A6", stroke: "270-#C9C9C9-#A6A6A6" } } }); // 位置変数 var x = 0; // 速度 var vx = 0; // 加速 var ax = 0; var delay = 10; var vMultiplier = 0.05; if (window.DeviceMotionEvent === undefined) { // デバイスはモーション API をサポートしません。 } else { window.ondevicemotion = function (event) { ax = event.accelerationIncludingGravity.x; //console.log("Accelerometer data - x: " + event.accelerationIncludingGravity.x + " y: " + event.accelerationIncludingGravity.y + " z: " + event.accelerationIncludingGravity.z); }; setInterval(function () { vx = vx + ax; x = parseInt(x + vx * vMultiplier); if (x < 0) { x = 0; vx = 0; } if (x > 100) { x = 100; vx = 0; } $("#gauge").wijlineargauge("option", "value", x); }, delay); } });</script>

ソースビュー

コードのコピー

<script type="text/javascript">
    $(document).ready(function () {
        $("#gauge").wijlineargauge({
            width: 400,
            height: 70,
            value: 50,
            tickMajor: {
                position: "center",
                factor: 3,
                offset: 5,
                style: { fill: "#efefef", stroke: "none" }
            },
            tickMinor: {
                position: "center",
                visible: true,
                style: { fill: "#efefef", stroke: "none" }
            },
            pointer: {
                length: .6,
                width: 8,
                style: { fill: "180-#FB7800-#C00100", stroke: "#FB7800", opacity: 0.8 }
            },
            face: {
                style: {
                    fill: "270-#C9C9C9-#A6A6A6",
                    stroke: "270-#C9C9C9-#A6A6A6"
                }
            }
        });
        // 位置変数
        var x = 0;
        // 速度
        var vx = 0;
        // 加速
        var ax = 0;
        var delay = 10;
        var vMultiplier = 0.05;
        if (window.DeviceMotionEvent === undefined) {
            // デバイスはモーション API をサポートしません。
        } else {
            window.ondevicemotion = function (event) {
                ax = event.accelerationIncludingGravity.x;
                //console.log("Accelerometer data - x: " + 
                event.accelerationIncludingGravity.x + 
                                        " y: " + event.accelerationIncludingGravity.y + "
                                        z: " + event.accelerationIncludingGravity.z);
            };
            setInterval(function () {
                vx = vx + ax;
                x = parseInt(x + vx * vMultiplier);
                if (x < 0) { x = 0; vx = 0; }
                if (x > 100) { x = 100; vx = 0; }
                $("#gauge").wijlineargauge("option", "value", x);
            }, delay);
        }
    });</script>

wijlineargauge ウィジェットが書式設定されます。

このトピックの作業結果

［F5］を押して、アプリケーションを実行します。ゲージが書式設定されていることに注意してください。