Как привязать данные MVC к Plotly

Question

Я пытаюсь связать данные JSON с графом Plotly в MVC. Консоль пуста и график вообще не отображается. Я открыт для альтернативных способов сделать это.

У меня есть модель MVC:

public class DataUploadModels
{
    [Key]
    public int id { get; set; }
    public string Empname { get; set; }
    public string Empid { get; set; }
    public string Title { get; set; }
    public decimal Annualizedbase { get; set; }
    public decimal Annualizedtcc { get; set; }
    public decimal grade { get; set; }
}

У него есть некоторые примеры данных, которые я возвращаю в представление в JSON:

public ActionResult Plotly()
{
    List<DataUploadModels> list = db.DataUploadModels.ToList();
    ViewBag.jsondata = this.Json(list);

    return View();
}

И я пытаюсь создать простой сюжет этого на мой взгляд:

<div id="tester" style="width:600px;height:250px;"></div>
<script>
array = @Json.Encode(ViewBag.jsondata)
xs = [];
for (i = 1, i < 3, i++){
    xs += array.Data[i].Title;
};
ys = [];
for (i = 1, i < 3, i++){
    ys += array.Data[i].Annualizedbase;
};
TESTER = document.getElementById('tester');
Plotly.plot( TESTER, [{
x: xs,
y: ys }], {
margin: { t: 0 } } );
</script>

Plotly включен в файл _Layout.cshtml и работал с жестко закодированными данными.

Answer 1

Чтобы назначить ваше свойство ViewBag массиву javascript, используйте

var array = @Html.Raw(Json.Encode(ViewBag.jsondata))

, а затем в циклах for необходимо .push() значение в массивах xs и ys

var array = @Html.Raw(Json.Encode(ViewBag.jsondata))
xs = [];
for (i = 1, i < 3, i++){
    xs += array.push(Data[i].Title);
};
ys = [];
for (i = 1, i < 3, i++){
    ys += array.push(Data[i].Annualizedbase);
};