Question

我正在尝试使用MVC，EF和json来显示BarChart。由于某种原因，条形图没有加载，谷歌浏览器在控制台中显示以下错误“未捕获的TypeError：无法读取未定义的属性'长度”。

我很难在代码中找到错误，希望有人可以帮助我。

DashboardController

    [AjaxOnly]
    public ActionResult WeeklyLatenessSummary()
    {
        ChartHelper chart = new ChartHelper();

        DateTime d = DateTime.Today;

        int offset = d.DayOfWeek - DayOfWeek.Monday;
        offset = (offset < 0) ? 6 : offset;

        DateTime startDate = d.AddDays(-offset);
        DateTime endDate = startDate.AddDays(7);

        var data = (from a in _db.Attendances
                    join at in _db.AttendanceTypes on a.Type equals at.AttendanceTypeID
                    where a.Date >= startDate
                    && a.Date < endDate
                    && at.AttendanceTypeCode == "L"
                    group at by at.AttendanceTypeDescription into g
                    select new
                    {
                        value = g.Count()
                    }).ToList();

        return Json(JsonConvert.SerializeObject(chart.PopulateBarChart("Weekly Lateness", data)), JsonRequestBehavior.AllowGet);
    }

JSON结果

"[{\"label\":\"Weekly Lateness\",\"data\":\"3\",\"fillColor\":\"#F7464A\",\"strokeColor\":\"#F7464A\",\"highlightFill\":\"#FF5A5E\",\"highlightStroke\":\"#FF5A5E\"}]"

查看

<div class="col-md-12">
            <div class=" panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">Weekly Lateness Summary</h3>
                </div><!--End of panel-heading-->
                <div class="panel-body">
                    <canvas id="weekly-lateness" width="650" height="300" class="center-block"></canvas>
                </div><!--End of panel-body-->
            </div><!--End of panel-->
        </div><!--End of col-md-12-->

smChart.js

    var ctx3 = $("#weekly-lateness").get(0).getContext("2d");

var barChartOptions = {
    //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
    scaleBeginAtZero: true,

    //Boolean - Whether grid lines are shown across the chart
    scaleShowGridLines: true,

    //String - Colour of the grid lines
    scaleGridLineColor: "rgba(0,0,0,.05)",

    //Number - Width of the grid lines
    scaleGridLineWidth: 1,

    //Boolean - Whether to show horizontal lines (except X axis)
    scaleShowHorizontalLines: true,

    //Boolean - Whether to show vertical lines (except Y axis)
    scaleShowVerticalLines: true,

    //Boolean - If there is a stroke on each bar
    barShowStroke: true,

    //Number - Pixel width of the bar stroke
    barStrokeWidth: 2,

    //Number - Spacing between each of the X value sets
    barValueSpacing: 5,

    //Number - Spacing between data sets within X values
    barDatasetSpacing: 1,

    //String - A legend template
    legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"

}

    var getDaysInMonth = function (month, year) {
        return new Date(year, month, 0).getDate();
    }

    var dates = [];
    for (var i = 1; i <= getDaysInMonth(8,2015); i++) {
        dates.push(i);
    }


    window.onload = function () {
            $.ajax({
            type: "GET",
            dataType: "json",
            url: "/Dashboard/WeeklyLatenessSummary/",
            success: function (data) {
                var json = JSON.parse(data);
                var chartData = [];

                for (var k in json) {
                    chartData.push(json[k])
                }

                if (chartData.length == 0) {
                    $('#weekly-lateness').hide();
                    $('#weekly-lateness').before("<h3 class='text-center'>No Data</h3>");
                }
                else {
                    var myPieChart3 = new Chart(ctx3).Bar(chartData, barChartOptions)
                }
            }
        });
    }

Answer 1

您正在错误地构建chartData变量。作为参考，这是它应该是什么样的（来自http://www.chartjs.org/docs/#bar-chart）

{
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ] };

labels（不要与作为系列名称的label混淆）对应于x轴条目，每个系列都有一个datasets元素。每个系列在data数组中的条目数与labels

中的条目数相同

使用您提供的示例JSON，这是使数据显示的一种方法

var chartData = {
    labels: ['Potatoes'],
    datasets: []
};

for (var k in json) {
    chartData.datasets.push(json[k])
}

根据您对需要显示的内容以及维度的要求更改它会更容易。

Answer 2

我冒昧地说它在渲染时会对你的传奇模板进行轰炸。 datasets未定义

legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"

Chart.js BarChart没有出现

2 个答案: