0

Kendo UI datawiz コンポーネント、RadialGauge があり、これにリアルタイム データをフィードしたいと考えています。次のように、asp.net ラッパーを使用してセットアップします (剣道のデモから抜粋)。

    <div id="gauge-container-center">
        @(Html.Kendo().RadialGauge()
              .Name("tensionGauge")
              .Pointer(pointer => pointer.Value(28))
              .Scale(scale => scale
                                  .MinorUnit(5)
                                  .StartAngle(-60)
                                  .EndAngle(240)
                                  .Max(180)
                                  .Labels(labels => labels
                                                        .Position(GaugeRadialScaleLabelsPosition.Inside)
                                  )
                                  .Ranges(ranges =>
                                      {
                                          ranges.Add().From(80).To(120).Color("#ffc700");
                                          ranges.Add().From(120).To(150).Color("#ff7a00");
                                          ranges.Add().From(150).To(180).Color("#c20000");
                                      })
              )
              )

    </div>

基礎となるすべての機能は、「リアルタイム」データ用であり、セットアップされ、正常に動作しています。私の唯一の問題は、signalR 値を.Pointer(pointer => pointer.Value(signalRValueHere)パーツに入力する方法です。これを行う方法に関する提案はありますか？この 2 つのフレームワークを組み合わせた例はまだ豊富ではないようで、検索結果はほとんどありません。

4

1 に答える 1

0

わかりましたので、別のアプローチを使用してこれを解決しました。代わりに javascript-initializer を使用することを選択し、スクリプトで SignalR 値を利用できるようにしました。

            function createGauge() {
                $("#tensionGauge").kendoRadialGauge({
                    pointer: {
                        value: 0,
                        color: "black",
                    },
                    cap: {
                        color: "white",
                        size: 1
                    },
                    scale: {
                        minorUnit: 50,
                        majorUnit: 100,
                        startAngle: -50,
                        endAngle: 230,
                        min: @Convert.ToInt32(Model.MinTensionRange),
                        max: @Convert.ToInt32(Model.MaxTensionRange),
                        labels: {
                            position: "inside"
                        },
                        ranges: [ // TODO: Fetch limits from signalR or Model
                            {
                                from: 300,
                                to: 100, 
                                color: "#ffc700"
                            },{
                                from: -300,
                                to: -100, 
                                color: "#ffc700"
                            }, {
                                from: @Convert.ToInt32(Model.MinTensionRange),
                                to: -300, 
                                color: "#c20000"
                            },{
                                from: @Convert.ToInt32(Model.MaxTensionRange),
                                to: 300, 
                                color: "#c20000"
                            }
                        ]
                    }
                });
            }
            $(document).ready(function () {
                createGauge();
            });

そして、値を更新するための js 部分:

messageHub.client.notifyTension = function (tensionMessage) {
    $('#tensionGauge').data("kendoRadialGauge").value(tensionMessage);
};
于 2013-07-18T10:18:20.283 に答える