如何在 X 轴上显示正确的日期

Posted 2023-05-09

【中文标题】如何在 X 轴上显示正确的日期

【英文标题】：How to display correct dates on the X-Axis

【发布时间】：2013-12-12 20:59:47

【问题描述】：

tl;dr：当我将 xAxis 的最小值和最大值设置为 2013-01-01 14:30:00 和 2013-01-01 15:45 时，我需要在 xAxis 而不是 14 上查看这些时间： 00 和 15:00，或 01。 01. 2013 和 01. 01. 2013，或任何自动生成的时间戳错误，例如here

---

我有一个关于剑道 Dataviz 图表的问题。我试图在一张图表中显示几个散点线图，描述一些技术指标如何随时间变化。为此，我需要以分钟为单位显示正确的日期和时间。而且无论我如何搜索或尝试，我似乎都无法实现这个看似简单的目标。

到目前为止所做的研究：Telerik 的Answer 几乎没有帮助。

所有示例和演示都最多使用天粒度，因此没有任何帮助。

这里有一些示例代码，我没能从中受益：jsbin.com/AtusAGO/1/edit

代码： 请尝试在JSFiddle 中评论和取消评论第 23 到 27 行，看看会发生什么（实际上几乎没有，也从来没有我想要实现的目标）。

(function () 
    $("#chart").kendoChart(
        legend: 
            visible: true,
            position: "bottom"
        ,
        seriesDefaults: 
            type: "scatterLine",
            markers: 
                size: 0
            
        ,
        xAxis: 
            "type": "date",
            labels: 
                format: "hh:mm d. M. yyyy"
            ,
            title: 
                text: "Time"
            ,
            min: "2012-02-05 00:35:00",
            max: "2012-02-05 01:40:00",
            baseUnitStep: "auto",
            /*baseUnit: "fit",
                            maxDateGroups: 10,*/
            autoBaseUnitSteps: 
                minutes: [5]
            
        ,
        series: [
            "name": "temp",
                "yAxis": "temperature",
                "data": [
                [
                    "2012-02-05T00:35:00",
                3],
                [
                    "2012-02-05T00:55:00",
                0],
                [
                    "2012-02-05T01:00:00",
                1],
                [
                    "2012-02-05T01:05:00",
                2],
                [
                    "2012-02-05T01:10:00",
                3],
                [
                    "2012-02-05T01:15:00",
                4],
                [
                    "2012-02-05T01:20:00",
                5],
                [
                    "2012-02-05T01:40:00",
                3]
            ]
        , 
            "name": "hum",
                "yAxis": "humidity",
                "data": [
                [
                    "2012-02-05T00:00:00",
                80],
                [
                    "2012-02-05T00:55:00",
                100],
                [
                    "2012-02-05T01:00:00",
                10],
                [
                    "2012-02-05T01:05:00",
                20],
                [
                    "2012-02-05T01:10:00",
                50],
                [
                    "2012-02-05T01:15:00",
                40],
                [
                    "2012-02-05T01:20:00",
                50],
                [
                    "2012-02-05T01:51:00",
                30]
            ]
        ],
        yAxes: [
            "name": "humidity",
                "title": 
                "text": "Humidity [%]"
            
        , 
            "name": "temperature",
                "title": 
                "text": "Temperature [\u00b0C]"
            
        ]
    );
());

【参考方案1】：

您可以使用以下数据格式：

series:
data: [
    
        date: new Date(2013,0,1,0,0,0),
        value: 23
    ,
    
        date: new Date(2013,0,2,0,0,0),
        value: 24
    
],
field: "value",
categoryField: "date"

并且在标签中，您可以将其设置为

template: "#:kendo.toString(value,'dd/MM/yyyy hh:mm:ss')"

【讨论】：

感谢您的回答，现在我无法回复它，但我会在测试您的代码后立即接受或发表评论。感谢您的耐心等待 :) 帕维尔

我能知道如何使用 Angular 2 来达到同样的效果吗？