Динамическое связывание данных с Highchart

Question

Я пытаюсь передать диаграмму Highchart с помощью данных с помощью viewmodel, но не могу заставить его работать. Список строк Я хочу использовать в моем графике заполняется в модели, как это:

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 привязан к моей модели просмотра, я не работаю. Может кто-нибудь объяснить, почему?

Model.ClinicUsers, который также является списком функций int.

My 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())) 

работал для меня.