使用Angular.JS将一个JSON值绑定到Syncfusion Circular gauge

Using Angular.JS to bind a JSON value to a Syncfusion Circular gauge

本文关键字：绑定 JSON Syncfusion gauge Circular 一个 JS Angular 使用      更新时间：2023-09-26

我正在做一个项目，使用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"
                }],
            }]
        });

然后在这个

中创建gauge:
<div id="CircularGauge1"></div>

量规将建立，但我无法让量规接收值。

如果有人对我如何才能使这个工作或我正在做的事情有任何想法，我将非常感谢任何输入!谢谢大家!编辑:synfusion软件创建一个量规，并根据给定的数值改变针头。我的ajax调用将一个数字输入到Sharepoint列表中，然后将其显示在一个div中。

在上面的代码片段中，您提到了传递值为" 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"的表，并添加了两条记录。使用"$"。调用动作方法"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

相关文章：