Question

我正在尝试使用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绑定到我的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()))

为我工作。

动态数据绑定到Highchart

1 个答案: