我正在使用 List 從控制器加載雷達圖。如何從控制器加載該圖表的動態標簽和資料。
List<MyModel> modelIist = new List<MyModel>();
MyModel model = new MyModel();
model.Data = 1;
model.Label = "First";
modelIist.Add(model);
model = new MyModel();
model.Data = 2;
model.Label = "Second";
modelIist.Add(model);
model = new MyModel();
model.Data = 3;
model.Label = "Third ";
modelIist.Add(model);
ViewBag.radarDesc = modelIist;
我正在從上面的串列中加載上面的資料。
<script>
$(document).ready(function () {
var ctx = $("#chart-line");
var myLineChart = new Chart(ctx, {
type: 'radar',
data: {
labels: [], //want to load from the list
/*},*/
datasets: [{
data: [],//want to load from the list
label: "MyData",
borderColor: "#458af7",
backgroundColor: '#458af7',
fill: true
}]
},
options: {
title: {
display: true,
text: '(Max points - 300)'
}
}
});
});
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
<canvas id="chart-line" width="299" height="200" class="chartjs-render-monitor" style="display: block; width: 299px; height: 200px;"></canvas>如何從 mvc 加載標簽：[]、資料：[]。
uj5u.com熱心網友回復：
試試這個方法：
安裝Microsoft.AspNetCore.Mvc.NewtonsoftJsonNuGet 包，然后將其序列ViewBag.radarDesc化為有效的 JavaScript 陣列：
ViewBag.radarDesc = Newtonsoft.Json.JsonConvert.SerializeObject(modelIist);
然后取出Page中的LabelandData填到合適的位置：
$(document).ready(function () {
var Label = [];
var Data = [];
var radarDesc = @Html.Raw(@ViewBag.radarDesc);
$.each(radarDesc, function (index, value) {
Label.push(value.Label);
Data.push(value.Data);
});
var ctx = $("#chart-line");
var myLineChart = new Chart(ctx, {
type: 'radar',
data: {
labels: Label, //want to load from the list
/*},*/
datasets: [{
data: Data,//want to load from the list
label: "MyData",
borderColor: "#458af7",
backgroundColor: '#458af7',
fill: true
}]
},
options: {
title: {
display: true,
text: '(Max points - 300)'
}
}
});
});
測驗結果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/532160.html
標籤：javascriptjQueryasp.net-mvcasp.net 核心图表.js
上一篇：單選按鈕相互重疊