使用Angular.JS将一个JSON值绑定到Syncfusion Circular gauge
Using Angular.JS to bind a JSON value to a Syncfusion Circular gauge
我正在做一个项目,使用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
相关文章:
- 将json数据绑定到剑道网格
- 使用JQUERY将包含数据集的JSON绑定到dropdownlist
- FusionCharts MVC - JSON Result 未绑定数据
- 具有 json 的挖空绑定复选框组
- 使用ajax/jquery绑定Json数据
- 从JSON中删除绑定
- 如何将json对象d中的值绑定到一个gridview
- 使用JSON进行角度双向绑定
- 通过json动态绑定作用域到ng模型
- SAPUI5绑定问题:json文件中维护的列表项链接不起作用
- Knockout.js用单个json对象绑定一个可观察对象
- Kendo网格加载后如何绑定JSON数据
- 在Angular中绑定JSON数据
- 在Knockout中绑定Json
- 在angular js中绑定json数组
- 如何在datalist中使用knockout js绑定json数据
- 绑定Json数据到HTML表
- 如何在Angular中绑定JSON属性中的HTML数据
- Grails 2.4.4绑定JSON嵌套对象
- 如何在angular js中绑定json数据到下拉列表