Question

我正在使用Syncfusion Javascript量表控件来显示每周的工资奖金。数据存储在SharePoint列表中。我写了一个javascript来将sharepoint列表从XML转换为JSON。

<script type="text/javascript">
$ajax({
    url: "/_api/web/lists/GetByTitle('bonusEntry')/items?$orderby=Date desc&$filter=Department eq 'Meltshop'&$top=1",
    type: "GET",
    headers: {
        "accept":"application/json;odata=verbose",
    },
    success: function (data) {      
        var newMsBonus = "";
            for(i=0; i < data.d.results.length; i++){
                newMsBonus = newMsBonus + "<div>" + data.d.results[i].ACrew + "</div>";
        }
            $('#oDataanalysisScoreBoard').html(newMsBonus);
    },
    error: function (error) {
        alert("error: " + JSON.stringify(error));
    }
})

然后将值放在此Div中。

<div id="oDataanalysisScoreBoard"></div>

基本上我想做的是将数据绑定到Syncfusion控件，该控件设置如下：

$("#CircularGauge1").ejCircularGauge({
            width: 500,
            height: 500,
            backgroundColor: "#3D3F3D",
            readOnly: false,
            scales: [{
                ticks: [{
                    type: "major",
                    distanceFromScale: 70,
                    height: 20,
                    width: 3,
                    color: "#ffffff"
                }, {
                    type: "minor",
                    height: 12,
                    width: 1,
                    distanceFromScale: 70,
                    color: "#ffffff"
                }],
            }]
        });

然后在这里创建仪表：

<div id="CircularGauge1"></div>

测量仪会建造，但我无法获得测量值来接收值。

如果有人对我如何完成这项工作或我正在做的事情有任何想法，我将非常感谢任何输入！感谢大家！编辑： synfusion软件创建一个仪表并根据给定的数值更改指针。我的ajax调用会将输入的数字拉入Sharepoint列表，然后在div中显示。

Answer 1

在上面的代码片段中，您提到了传递值为“String”。如果将字符串值传递给循环，它将仅作为字符串值连接。但是我们需要将整数值传递给Circular Gauge属性（width，height，distancefromscale）才能生效。因此，请使用以下内容更改代码段。

                  $.ajax({
            url: "/Gauge/GetData",
            type: "POST",
            success: function (data) {
                var newMsBonus = 0;
                for (i = 0; i < data.length; i++) {
                    newMsBonus = newMsBonus + data[i].MajorDistanceFromScale;   // Here i have used the MajorScale distanceFromScale value for the demo
                }

                $('#oDataanalysisScoreBoard').html(newMsBonus);
                 },
            failure: function (error) {
                alert("no data available");
            }
        });

我们已准备好样本以满足您对MVC应用程序的要求，包括“.mdf”数据库。我们创建了名为“GaugeData”的表并添加了两个记录。并使用“$ .ajax”调用操作方法“GetData”并从控制器接收“JSON”数据。请参阅以下代码段。

查看页面：

            $.ajax({
            url: "/Gauge/GetData",
            type: "POST",
            success: function (data) {},
            failure: function (error) {
           }
        });

控制器页面：

 public class GaugeController : Controller
{
    GaugeDataDataContext db = new GaugeDataDataContext();

    public JsonResult GetData()
    {
        IEnumerable data = db.GaugeDatas.Take(500); 
        return Json(data, JsonRequestBehavior.AllowGet);
    }

}

然后将计算值分配给gauge属性。在这里，我使用了从数据库记录中读取并分配给仪表属性的“MajorDistanceFromScale”值。请参阅以下编码片段。

                var distanceValue = parseInt($("#oDataanalysisScoreBoard")[0].innerHTML);
                $("#CircularGauge1").ejCircularGauge({
                    width: 500,
                    height: 500,
                    backgroundColor: "#3D3F3D",
                    readOnly: false,
                    scales: [{
                        ticks: [{
                            type: "major",
                            distanceFromScale: distanceValue,
                            height: 20,
                            width: 3,
                            color: "#ffffff"
                        }, {
                            type: "minor",
                            height: 12,
                            width: 1,
                            distanceFromScale: 70,
                            color: "#ffffff"
                        }],
                    }]
                });

另请参阅以下附件样本以获取更多参考。 GaugeListSample

使用Angular.JS将JSON值绑定到Syncfusion Circular规范

1 个答案: