如何将模型列表变量绑定到highchart

Question

@model List<Monitoring>

<script>
    function drawAWSInstancesMonitoring() {
        var seriesData = [];
        @foreach (var item in Model)
        {
            seriesData.push([Date.parse(new Date(parseInt((item.SampleDateTime).substr(6)))), item.PercentUsed]);
        }
        $('#chart_Monitoring').highcharts('StockChart', {
            rangeSelector: {
                selected: 1,
                inputEnabled: false
            },
            title: { text: 'Utilization' },
            yAxis: { type: 'double', min: 0 },
            xAxis: {
                type: 'datetime',
                labels: {
                    formatter: function () { return Highcharts.dateFormat('%a %d %b %H:%M', this.value); },
                    dateTimeLabelFormats: {
                        minute: '%H:%M',
                        hour: '%H:%M',
                        day: '%e. %b',
                        week: '%e. %b',
                        month: '%b \'%y',
                        year: '%Y'
                    }
                }
            },
            series: [{
                name: 'Usage',
                data: seriesData,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });
    }
</script>

HTML

<div id="chart_Monitoring" class="col-sm-12" style="height: 350px;"></div>`

如何将模型直接绑定到highchart？

Answer 1

你不能在js中使用服务器变量。所以你需要在json中解析你的模型，如

var model = '@Html.Raw(Json.Encode(Model))';
            var data = JSON.parse(model);
            var seriesData = [];
            for (i = 0; i < data.length; i++) {
                seriesData.push([Date.parse(new Date(parseInt((data[i].SampleDateTime).substr(6)))), data[i].PercentUsed]);
            }