動態數據綁定到Highchart

Question

我在嘗試使用viewmodel爲數據提供一張Highchart圖表，但無法使其工作。 我想在我的圖表使用填充模型中的這樣字符串列表：

var list = new List<ClinicPatients>(); 
foreach (var customer in customers) 
{ 
    var customerName = GetCustomerName(customer); 
    var numOfPatients = GetNumOfActivePatients(customer); 
    list.Add(new ClinicPatients { ClinicName = customerName, PatientNumber = nummOfPatients }); 
} 
public string ClinicList { get; set; } 
var tempList = list.Select(x => x.ClinicName); 
ClinicList = JsonConvert.SerializeObject(tempList); 

當調試這一點，並選擇文本可視化我看到這個ClinicList： [「A」，「B 「，」C「，」D「，」E「，」F「]。如果我複製這個並將其硬編碼到我的javascrip，它可以工作，但是當我的javascrip綁定到我的viewmodel時，我不起作用。有人能解釋爲什麼嗎？

Model.ClinicUsers是一個int列表。

我的HTML/JavaScript的看起來是這樣的：

<div class="content"> 
    <div> 
     <div id="usersPerClinicDiagram" style="width: 800px; height: 300px;"> 
      <div id="activUsers" style="width: 800px; height: 300px;"></div> 
     </div> 
    </div> 
</div> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $(function() { 
      var usersPerClinicDiagram = new Highcharts.Chart({ 
       chart: { 
        renderTo: 'activUsers', 
        type: 'bar' 
       }, 
       legend: {enabled: false}, 
       title: {text: 'Number of active users per clinic'}, 
       subtitle: {text: 'for how many weeks they kept on using Triabetes'}, 
       tooltip: {enabled: false}, 
       xAxis: { 
        title: {text: 'number of users',align: 'high'}, 
        allowDecimals: false, 
        categories: @Model.ClinicList 
        }, 
       yAxis: {min: 0, 
        allowDecimals: false, 
        title: {text: 'Clinic',align: 'high'}, 
        labels: {overflow: 'justify'} 

       }, 
       plotOptions: { 
        bar: {dataLabels: {enabled: false} 
        } 
       }, 
       credits: {enabled: false}, 
       series: [{ data: @Model.ClinicUsers }] 
      }); 
     }); 
    }); 
</script> 

Answer 1

試試這個：

@Html.Raw(Json.Encode(Model.ClinicUsers.ToArray())) 

爲我工作。