如何在剑道图表上按日期显示 plotBands？

Question

我一直在尝试在剑道图表上按日期添加 plotBands，就像在 sn-p 中一样。 plotBands 似乎不在正确的位置。

注意 sn-p 处的 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"。这会导致步骤相距太远，并且您的绘图带会“四舍五入”到最近的步骤，可以这么说。以下是您可以解决此问题的方法：

1. 将 baseUnitStep 更改为 1。这将为您提供 1 的精度 分钟为您的情节乐队。然而，这也会导致网格 线和轴标签以 1 分钟为间隔，会很慢 看起来很可怕。我们将在以下步骤中解决此问题。
2. 将step 值180（或类似值）添加到标签的配置中。这将使 类别标签每 3 小时显示一次。
3. 添加majorGridLines配置部分，并将网格线的步长设置为180，使其与标签一样频繁出现。
4. 添加majorTicks 配置部分并将步长间隔设置为60 或其他内容。

您的 categoryAxis 配置部分应如下所示：

  categoryAxis: {
    field: "timeStamp",
    type: "date",
    labels: {
        rotation: 40,
        template: "#= kendo.format('{0:dd/HH:mm}', new Date(value)) #",
        step: 180
    },
        baseUnit:"minutes",
        baseUnitStep: 1,
        plotBands: plots,
        majorTicks: {
             step: 60
        },
        majorGridLines: {
             visible: true,
             step: 180
        }
    }

您可以在此 dojo 上查看您的代码 sn-p 以及这些更改：https://dojo.telerik.com/EFEjezoR