jqwidgets图表不呈现任何数据

为我生成图表的版本有点不同,我注意到高度和宽度绝对不是图表的属性。

它终于显示了对该网站的攻击

我已经包含了所有的代码,这样任何人都可以看到我从何处获取数据。我使用以下代码生成java:

@inject Walter.Web.FireWall.IFireWall _fireWall
@{
var data = _fireWall.Incidents.All()
                .Where(where => where.Reported > DateTime.Now.AddYears(-1))
                .GroupBy(groupOn => groupOn.Reported.Date)
                .Select(source => new
                {
                    date = source.Key,
                    active = source.Count(w => w.Expires > DateTime.Now),
                    expired = source.Count(w => w.Expires < DateTime.Now),
                }).OrderBy(order=>order.date)
                .ToArray();          
}

<!--Placeholder for the chart-->
<div id="jqxIncidentChart" class="chart" >
</div>


<script>

    document.addEventListener('DOMContentLoaded', (event) => {

        var dataIncident = '@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(data))';
        var sourceIncidents =
        {
            datatype: "json",
            datafields: [
                { name: 'date' },
                { name: 'active' },
                { name: 'expired' }
            ],
            localdata: dataIncident
        };

        var dataAdapterIncidents = new $.jqx.dataAdapter(sourceIncidents);

        var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];


        var incidentChartSettings = {
            title: "Incidents over time",
            description: "Recorded @data.Sum(count=>count.active+count.expired) incidents in @((int)(data.Max(max=>max.date)-data.Min(min=>min.date)).TotalDays) days",
            enableAnimations: true,
            showLegend: true,
            padding: { left: 5, top: 5, right: 5, bottom: 5 },
            titlePadding: { left: 30, top: 0, right: 0, bottom: 10 },
            source: dataAdapterIncidents,
            xAxis:
            {
                dataField: 'date',
                formatFunction: function (value) {
                    return value.getDate() + '-' + months[value.getMonth()] + '-' + value.getFullYear();
                },
                type: 'date',
                baseUnit: 'day',
                minValue: '@data.Min(min=>min.date).ToString("dd-MM-yyyy")',
                maxValue: '@data.Max(max=>max.date).ToString("dd-MM-yyyy")',
                valuesOnTicks: true,
                tickMarks: {
                    visible: true,
                    interval: 20,
                    color: '#BCBCBC'
                },
                unitInterval: 5,
                gridLines: {
                    visible: true,
                    interval: 5,
                    color: '#BCBCBC'
                },
                labels: {
                    angle: -45,
                    rotationPoint: 'topright',
                    offset: { x: 0, y: -25 }
                }
            },
            valueAxis:
            {

                visible: true,
                title: { text: 'Incident on day<br>' },
                tickMarks: { color: '#BCBCBC' }
            },
            colorScheme: 'scheme06',
            seriesGroups:
                [
                    {
                        type: 'line',
                        series: [
                            { dataField: 'active', displayText: 'active' },
                            { dataField: 'expired', displayText: 'expired' }
                        ]
                    }
                ]
        };
        $('#jqxIncidentChart').jqxChart(incidentChartSettings);
    });
</script>

它生成以下输出:

<!--Placeholder for the chart-->
<div id="jqxIncidentChart" class="chart" >
</div>


<script>

    document.addEventListener('DOMContentLoaded', (event) => {

        var dataIncident = '[{"date":"2020-11-06T00:00:00Z","active":0,"expired":6},{"date":"2020-11-07T00:00:00Z","active":0,"expired":5},{"date":"2020-11-08T00:00:00Z","active":0,"expired":6},{"date":"2020-11-09T00:00:00Z","active":0,"expired":7},{"date":"2020-11-10T00:00:00Z","active":0,"expired":5},{"date":"2020-11-11T00:00:00Z","active":0,"expired":59},{"date":"2020-11-12T00:00:00Z","active":0,"expired":16},{"date":"2020-11-13T00:00:00Z","active":0,"expired":11},{"date":"2020-11-14T00:00:00Z","active":0,"expired":104},{"date":"2020-11-15T00:00:00Z","active":0,"expired":18},{"date":"2020-11-16T00:00:00Z","active":0,"expired":22},{"date":"2020-11-17T00:00:00Z","active":0,"expired":9},{"date":"2020-11-18T00:00:00Z","active":0,"expired":19},{"date":"2020-11-19T00:00:00Z","active":0,"expired":6},{"date":"2020-11-20T00:00:00Z","active":0,"expired":22},{"date":"2020-11-21T00:00:00Z","active":0,"expired":10},{"date":"2020-11-22T00:00:00Z","active":0,"expired":6},{"date":"2020-11-23T00:00:00Z","active":0,"expired":11},{"date":"2020-11-24T00:00:00Z","active":0,"expired":9},{"date":"2020-11-25T00:00:00Z","active":0,"expired":5},{"date":"2020-11-26T00:00:00Z","active":0,"expired":9},{"date":"2020-11-27T00:00:00Z","active":0,"expired":3},{"date":"2020-11-28T00:00:00Z","active":0,"expired":48}]';
        var sourceIncidents =
        {
            datatype: "json",
            datafields: [
                { name: 'date' },
                { name: 'active' },
                { name: 'expired' }
            ],
            localdata: dataIncident
        };

        var dataAdapterIncidents = new $.jqx.dataAdapter(sourceIncidents);

        var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];


        var incidentChartSettings = {
            title: "Incidents over time",
            description: "Recorded 416 incidents in 22 days",
            enableAnimations: true,
            showLegend: true,
            padding: { left: 5, top: 5, right: 5, bottom: 5 },
            titlePadding: { left: 30, top: 0, right: 0, bottom: 10 },
            source: dataAdapterIncidents,
            xAxis:
            {
                dataField: 'date',
                formatFunction: function (value) {
                    return value.getDate() + '-' + months[value.getMonth()] + '-' + value.getFullYear();
                },
                type: 'date',
                baseUnit: 'day',
                minValue: '06-11-2020',
                maxValue: '28-11-2020',
                valuesOnTicks: true,
                tickMarks: {
                    visible: true,
                    interval: 20,
                    color: '#BCBCBC'
                },
                unitInterval: 5,
                gridLines: {
                    visible: true,
                    interval: 5,
                    color: '#BCBCBC'
                },
                labels: {
                    angle: -45,
                    rotationPoint: 'topright',
                    offset: { x: 0, y: -25 }
                }
            },
            valueAxis:
            {

                visible: true,
                title: { text: 'Incident on day<br>' },
                tickMarks: { color: '#BCBCBC' }
            },
            colorScheme: 'scheme06',
            seriesGroups:
                [
                    {
                        type: 'line',
                        series: [
                            { dataField: 'active', displayText: 'active' },
                            { dataField: 'expired', displayText: 'expired' }
                        ]
                    }
                ]
        };
        $('#jqxIncidentChart').jqxChart(incidentChartSettings);
    });
</script>