Использование Angular.JS для привязки значения JSON к круглому манометру Syncfusion

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>

Датчик будет построен, но я не могу получить датчик, чтобы получить значение.

Если у кого-то есть какие-либо идеи о том, как я могу сделать эту работу или что я делаю, я был бы очень признателен за любой вклад! Спасибо всем! РЕДАКТИРОВАТЬ: Программное обеспечение синфузии создает датчик и меняет иглу в зависимости от заданного ей числового значения. Мой вызов 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);
    }

}

А затем присваивает рассчитанное значение свойству датчика. Здесь я использовал значение 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