0

アプリケーションでKnockout-Kendo ラジアル ゲージに問題があります。データ バインド プロパティを使用して初期化しようとしていますが、サイズが正しく変更されていないようです。

<div id="speedGauge" data-bind="kendoRadialGauge: $parent.speedGaugeOptions"></div>
...
self.speedGaugeOptions = {
    renderAs: 'svg',
    value: 0,
    gaugeArea: {
        background: 'transparent'
    },
    pointer: {
        color: 'lightgray',
        animation: {
            speed: 100
        }
    },
    scale: {
        minorUnit: 75,
        majorUnit: 150,
        startAngle: -40,
        endAngle: 220,
        max: 300,
        min: -300,
        labels: {
            position: 'inside',
            font: '10px Arial,Helvetica,sans-serif'
        },
        ranges: [
                {
                    from: -300,
                    to: -200,
                    color: "darkgray"
                },
                {
                    from: 300,
                    to: 200,
                    color: "darkgray"
                }
        ],
        rangeSize: 5,
        rangeDistance: -5,
        rangePlaceholderColor: '#f2f2f2'
}

ここが楽しい部分です。ページが (デュランダルを使用して) アクティブ化されると、ゲージは次のように描画されます。 ここに画像の説明を入力

ゲージが正しく拡大縮小され、灰色の円の内側に収まるようにするには、次のように再描画する必要があります (ブラウザー コンソールから、または .js ファイルから)。

$("#speedGauge").data("kendoRadialGauge").redraw()

そうするとき、私のゲージは想定どおりに見えます。 ここに画像の説明を入力

今、私は通常の剣道の実装を使用してそれを作成しようとしました - そしてそれは問題なく動作し、上の画像のようにゲージが正しく描画されます;

<div id="speedGauge"></div>
...
self.activate = function () { 
   createGauge();
}
...
function createGauge() {
    $("#speedGauge").kendoRadialGauge({
        renderAs: 'svg',
        value: 0,
        gaugeArea: {
            background: 'transparent'
        },
        pointer: {
            color: 'lightgray',
            animation: {
                speed: 100
            }
        },
        scale: {
            minorUnit: 75,
            majorUnit: 150,
            startAngle: -40,
            endAngle: 220,
            max: 300,
            min: -300,
            labels: {
                position: 'inside',
                font: '10px Arial,Helvetica,sans-serif'
            },
            ranges: [
                    {
                        from: -300,
                        to: -200,
                        color: "darkgray"
                    },
                    {
                        from: 300,
                        to: 200,
                        color: "darkgray"
                    }
            ],
            rangeSize: 5,
            rangeDistance: -5,
            rangePlaceholderColor: '#f2f2f2'
        }
    });
}

ここで何が間違っているのか、誰かが考えていますか?

4

1 に答える 1

0

同僚は、デュランダルに付随するイベントでゲージを強制的に再描画することを提案しました。これにより、今のところ問題は解決しました。このソリューションでは、ゲージの実際のサイズ変更は表示されません。

self.attached = function(element) {
    $(element).find("[data-role='radialgauge']").each(function () { $(this).data("kendoRadialGauge").redraw(); });    
};

こちらで問題を報告しました。

于 2014-10-22T11:08:47.320 に答える