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

Question

我一直在尝试按代码段中的 kendo 图表按日期添加 plotBand。 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"。这会导致台阶相距太远，可以这么说，您的绘图带 "rounded" 到最近的台阶。解决此问题的方法如下：

将 baseUnitStep 更改为 1。这将为您提供 1 的精度分钟为您的情节乐队。然而，这也会导致网格线和轴标签以 1 分钟为间隔，这会很慢看起来很可怕。我们将在以下步骤中解决该问题。
将 step 值 180（或类似值）添加到标签的配置中。这将使类别标签每 3 小时出现一次。
添加 majorGridLines 配置部分并将网格线的步长设置为 180，以便它们出现的频率与标签一样。
添加一个 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 上看到包含这些更改的代码片段：https://dojo.telerik.com/EFEjezoR

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

How to display plotBands by date on a Kendo chart?

kendo-ui

kendo-chart