图表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);