Question

我一直试图按日期在kendo图表上按日期添加plotBands。 plotBands似乎不在正确的位置。

请注意代码段中的TimeWindows对象。它应该在第一点之后开始。

tideSet是具有Tides和TideWindows集合的对象

如何在正确的位置配置plotBands？

    var tideSet={
                 "Tides":[
                   {
                 "timeStamp":"2018-07-24T00:33:00",
                 "pred":0.660
               },
               {
                 "timeStamp":"2018-07-24T06:09:00",
                 "pred":6.350
               },
               {
                 "timeStamp":"2018-07-24T12:32:00",
                 "pred":0.400
               },
               {
                 "timeStamp":"2018-07-24T18:51:00",
                 "pred":7.410
               },
               {
                 "timeStamp":"2018-07-25T01:19:00",
                 "pred":0.570
               },
               {
                 "timeStamp":"2018-07-25T06:58:00",
                 "pred":6.380
               }
                 ],
                 "TideWindows":[
                   {
                     "WindowsStart":"2018-07-24T02:03:00",
                     "WindowEnd":"2018-07-24T08:39:00"
                   }
                 ]
    };   
    
                
                var plots = new Array();

                for (var i = 0; i < tideSet.TideWindows.length; i++) {
                    plots.push(
                        {
                            from: new Date(tideSet.TideWindows[i].WindowsStart),
                            to: new Date(tideSet.TideWindows[i].WindowEnd),
                            color: "#007eff"
                        });
                }

                $("#kendoChartTides").kendoChart({
                    dataSource: {
                        data: tideSet.Tides,
                        schema: {
                            model: {
                                fields: {
                                    pred: { type: "string" },
                                    timeStamp: { type: "date" }
                                }
                            }
                        }
                    },
                    series: [{
                        type: "line",
                        style: "smooth",
                        field: "pred",
                        categoryField: "timeStamp"
                    }],
                    title: {
                        text: "Tides"
                    },
                    valueAxis: {
                        title: {
                            text: "Predictions"
                        }
                    },
                    categoryAxis: {
      									field: "timeStamp",
                        type: "date",
                        labels: {
              							rotation: 40,
                            template: "#= kendo.format('{0:dd/HH:mm}', new Date(value)) #"
                        },
                      	baseUnit:"minutes",
                        baseUnitStep: "auto",
                        plotBands: plots
                    },
                    tooltip:                  
                  	{
                        visible: true,
                        template: "#= kendo.format('{0:dd/HH:mm}', new Date(category)) # <br /> Value: #= value # "
                    }
                });

<link href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" rel="stylesheet"/>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2017.2.621/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2017.2.621/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script></head>


<div id="kendoChartTides"> </div>

Answer 1

之所以发生这种情况，是因为绘图带与类别轴的台阶对齐。您目前拥有图表的baseUnitStep至"auto"。可以说，这会导致步骤之间的距离太远，并且绘图区会“四舍五入”到最近的步骤。解决此问题的方法如下：

将baseUnitStep更改为1。这将使您的精度为1 分钟为您的情节乐队。但是，这也会导致网格线和轴标签的间隔为1分钟，这会很慢看起来很恐怖我们将通过以下步骤对其进行修复。
将step的{{1}}值（或类似值）添加到标签的配置中。这将使类别标签每3小时显示一次。
添加一个180配置部分，并将网格线的阶跃设置为majorGridLines，以便它们与标签一样频繁地出现。
添加一个180配置节，并将步距设置为majorTicks或类似的值。

您的categoryAxis配置部分应类似于此：

您可以在此dojo上查看包含以下更改的代码段：docs

如何在Kendo图表上按日期显示plotBand？

1 个答案: