Question

我正在尝试根据this示例呈现图表。我正在从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

categoryField被命名为categoryField(s)，这是我的一个愚蠢的错误。

Answer 2

您可以使用dataSource对象的架构来执行此操作，而不是自己转换为日期：

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

<强> DEMO FIDDLE

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

2 个答案: