C# 动态数据绑定到Highchart

我试图使用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);

<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>

var list=newlist（）；
foreach（客户中的var客户）
{
var customerName=GetCustomerName（客户）；
var numOfPatients=GetNumOfActivePatients（客户）；
添加（新的临床医生{ClinicName=customerName，PatientNumber=nummOfPatients}）；
}
公共字符串列表{get；set；}
var templast=list.Select（x=>x.name）；
ClinicList=JsonConvert.SerializeObject（模板列表）；

当我调试并选择文本可视化工具时，我在列表中看到： [“A”、“B”、“C”、“D”、“E”、“F”]哪个看起来对。如果我将其复制并硬编码到我的javascrip中，它会工作，但当我的javascrip绑定到我的viewmodel时，我就不工作了。有人能解释一下原因吗

Model.ClinicUsers是一个int列表，它也可以工作

我的Html/Javascript如下所示：

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

<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>

$（文档）.ready（函数（）{
$（函数（）{
var usersPerClinicDiagram=新的Highcharts.Chart({
图表：{
renderTo:'activUsers'，
类型：'bar'
},
图例：{enabled:false}，
标题：{text:'每个诊所的活动用户数'}，
字幕：{text:'他们持续使用Triabetes'多少周}，
工具提示：{enabled:false}，
xAxis：{
标题：{text:'number of users'，align:'high'}，
allowDecimals:false，
类别：@Model.ClinicList
},
yAxis:{min:0，
allowDecimals:false，
标题：{text:'Clinic'，align:'high'}，
标签：{溢出：'justify'}
},
打印选项：{
bar:{dataLabels:{enabled:false}
}
},
信用证：{已启用：错误}，
系列：[{data:@Model.ClinicUsers}]
});
});
});

试试这个：

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

---

为我工作。

谢谢你，shwetaOnStack！