Question

我有一个Kendo UI datawiz组件RadialGauge，我想用实时数据提供。它是使用asp.net包装器设置的，就像这样（从kendo演示中剪掉）：

    <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)部分。有关如何做到这一点的任何建议？似乎并没有结合这两个框架的大量例子，因此搜索结果很少。

Answer 1

好的，所以我用不同的方法解决了这个问题。我选择使用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-part：

messageHub.client.notifyTension = function (tensionMessage) {
    $('#tensionGauge').data("kendoRadialGauge").value(tensionMessage);
};

SignalR值与Kendo UI Asp.net包装器一起使用

1 个答案: