圖表js，動態加載數據

Question

我試圖從我的ViewModel加載數據到Chart Js。看起來我很接近，但可能我的javascript語法有點偏離。

我的模型包含一個整數列表。目前，硬編碼爲三種不同的整數。有沒有人做過類似於我期望達到的目標？

這是我的觀點：

@model CRADV.ViewModel.RejectMessageReportViewModel 

@{ 
    List<int> data = Model.reject_count; 
    var labels = Model.messages; 
    var colors = new[] { "#FF6384", "#36A2EB", "#FFCE56" }; 
} 
<div class="col-lg-4"> 
    <canvas id="pie-chart" width="400" height="400"></canvas> 

    @Model.reject_count.FirstOrDefault() 
</div> 
<script type="text/javascript"> 
    var data = '@data.ToList()'; 
    var ctx = document.getElementById("pie-chart"); 
    var myPieChart = new Chart(ctx, { 
     type: 'pie', 
     data: { 
      labels: [ 
         "#FF6384", 
         "#36A2EB", 
         "#FFCE56" 
      ], 
      datasets: [ 
       { 
        data: data, 
        backgroundColor: [ 
         "#FF6384", 
         "#36A2EB", 
         "#FFCE56" 
        ], 
        hoverBackgroundColor: [ 
         "#FF6384", 
         "#36A2EB", 
         "#FFCE56" 
        ] 
       }] 
     } 
    }); 
</script> 

Answer 1

它看起來像你想的整數.NET名單分配給jQuery函數。由於您在混合兩種語言，因此這絕不會奏效。您需要先將List序列化爲JSON。

你可以做到這一點使用Newtonsoft Json的NuGet包：

using Newtonsoft.Json; 

var data= JsonConvert.SerializeObject(Model.reject_count);