剑道图表x轴不显示给定的数据

Question

我试图根据这个例子呈现一个图表。我正在接收json格式的数据，格式如下:

[{"date":"2015/06/01","count":4588}]

然而，即使有了这个给定的数据，当我尝试使用categoryFields在x轴上显示日期时，也没有显示任何内容。如有任何帮助，不胜感激。

控制器:

[Route("apiaggregate")]
    [HttpGet]        
    public IEnumerable<ApiDto> Get(DateTime? start = null, DateTime? end = null )
    {                        
       var dateData =
                from b in session.Query<CallTracker>()
                group b by b.CallDateTime.Value.Date into g
                where g.Key.Date >= DateTime.Today.AddDays(-3)  && g.Key.Date <= DateTime.Today.AddDays(3)
                orderby g.Key
                select new ApiDto{date = g.Key.ToString("yyyy/MM/dd"), count = g.Count()};
           return dateData;

相关代码:

function chartData(dataApi) {
    var containData = [];        
    for (i = 0; i < dataApi.length; i++) {
        var p = dataApi[i];
        p.date = new Date(p.date);
        containData.push(p);
    }
    createChart(containData);       
}
function createChart(stats) {
    $("#chart").kendoChart({
        dataSource: stats,
        title: {
            text: "API Calls"
        },
        series: [{
            type: "column",
            field: "count",
            // This is where the x-axis is supposed to be filled with dates.
            categoryFields: "date",
            line: {
                style: "step"
            }
        }],
        categoryAxis: {
            baseUnit: "weeks",
            majorGridLines: {
                visible: false
            }
        },
        valueAxis: {
            line: {
                visible: false
            },
            title: {
                text: "# of calls"
            }
        },
        tooltip: {
            visible: true,
            format: "{0}"
        }
    })
}   
$(document).ready(function () {
    var action = "calltrackers";
    var url = "/api/report/apiaggregate";        
    $.ajax({
        type: "GET",
        processData: false,
        url: "/api/report/apiaggregate",
        timeout: 10000,
        contentType: "application/json; charset=utf-8",
        datatype: "json",
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.timeout = 10000;
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
        },
        success: function (data, status, d) {
            if (status == "success") {
                JSON.stringify(data);
                chartData(data);
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            $('.mainContent').busyIndicator(false);
            callBackFails(xhr, textStatus, errorThrown);
        }
    });
});
function callBackFails(xhr, textStatus, errorThrown) {
    processError(xhr);
}
$("#Test").bind("kendo:skinChange", chartData);
$(".radioContainer").bind("change", refresh);
function refresh() {
    var chart = $("#chart").data("kendoChart"),
        series = chart.options.series,
        categoryAxis = chart.options.categoryAxis,
        baseUnitInputs = $("input:radio[name=baseUnit]");
    categoryAxis.baseUnit = baseUnitInputs.filter(":checked").val();
    chart.refresh();
}

Html:

<div class="topArea">
</div>
<div id="Test">
<div class="demo-section k-content">
    <div id="chart"></div>
</div>
    <h4>Base Date Unit</h4>
<div class="radioContainer">
    <ul class="options">
        <li>
            <input id="baseUnitYears" name="baseUnit"
                   type="radio" value="years" autocomplete="off" />
            <label for="baseUnitYears">Years</label>
        </li>
        <li>
            <input id="baseUnitMonths" name="baseUnit"
                   type="radio" value="months" autocomplete="off" />
            <label for="baseUnitMonths">Months</label>
        </li>
        <li>
            <input id="baseUnitWeeks" name="baseUnit"
                   type="radio" value="weeks" checked="checked" autocomplete="off" />
            <label for="baseUnitWeeks">Weeks</label>
        </li>
        <li>
            <input id="baseUnitDays" name="baseUnit"
                   type="radio" value="days" autocomplete="off" />
            <label for="baseUnitDays">Days</label>
        </li>
    </ul>
</div>

Answer 1

您可以使用dataSource对象的模式来完成转换，而不是自己转换为日期:

var theDataSource = new kendo.data.DataSource({
        data: data,
        schema: {
            model: {
                fields: {
                    date: {
                        type: "date"
                    }
                }
            }
        }       
});

演示小提琴

Answer 2

将categoryField改为categoryField(s)，这是我犯的一个愚蠢的错误。