在Kendo Dataviz中强制日期轴具有所有值

Force date Axis in Kendo Dataviz to have all values

本文关键字：日期 Kendo Dataviz      更新时间：2023-09-26

我正在用剑道制作图表，遇到了一个问题。

我得到了一堆数据并将其传递到图表中，数据有一个日期和一个值，我的js看起来像这样:

chart.kendoChart({
                 title: {
                     text: "title"
                 },
                 seriesDefaults: {
                     type: "line"
                 },
                 dataSource: {
                     data: []
                 },
                 series: [{
                     name: "Value",
                     field: "value"
                 }]
                 categoryAxis: [{
                     type: "date",
                     field: "date",
                     baseUnit: "months",
                     min: "2013-07-22T00:00:00",
                     max: "2014-07-22T00:00:00"
                 }]
             });

问题是，如果没有返回数据(即如上所述的空数组)，我仍然希望看到底部的月份日期标签，但那里什么也没有(y轴上仍然有默认值标签)。

我看过Kendo文档，在那里找不到任何东西，也没有在stackoverflow上找到任何类似的问题。有人能帮忙吗?如果有什么我需要澄清/提供的，请在评论中告诉我。谢谢。

在没有数据的月份用空值填充数据可以解决您的问题。

请以这个小提琴为例:

参见下面的示例代码:

var _data=[{"weight":200,"createddate":"1/1/2014"},
       {"weight":200,"createddate":"2/1/2014"},
       {"weight":200,"createddate":"3/1/2014"},
       {"weight":149.91,"createddate":"4/1/2014"},
       {"weight":null,"createddate":"5/1/2014"},
       {"weight":null,"createddate":"6/1/2014"},
      {"weight":null,"createddate":"7/1/2014"},
      {"weight":null,"createddate":"8/1/2014"},
      {"weight":null,"createddate":"9/1/2014"},
      {"weight":null,"createddate":"10/1/2014"},
      {"weight":null,"createddate":"11/1/2014"},
      {"weight":null,"createddate":"12/1/2014"}]
        $("#kk").kendoChart({
            dataSource: {
                data:_data
            },
            seriesColors: ["Red"],                
            seriesDefaults: {
                type: "column",
            },
            series: [{
                name: "weight",
                field: "weight",
                categoryField: "createddate",
            }],
            categoryAxis: {
                type: "date",
                baseUnit: "months"
            }                        
        });
相关文章：