JavaScript - 转换日期和时间（Chart.js和Moment.js）

Question

如果您有更好的解决方案（也许是针对此问题的D3解决方案）：您的回答将不胜感激！

我是Chart.js的新手，尽管一遍又一遍地阅读Chart.js和Moment.js的文档，但我似乎并不具备创建我想要创建的图表所需的技能。

也就是说，我有两个阵列：一个用于y-axis，另一个用于x-axis。

你可以查看，编辑，分叉和所有here on codepen。

它看起来像这样：

现在这看起来很好，但就像我说的那样，我似乎没有Moment.js技能将一秒钟的那些变换为好看：2:31.70(mm:ss:SS)或23.76(ss:SS)或1:58.43.20(HH:mm:ss:SS)。

在hundreths被转换到正常时间的时间旁边，人类可读。这个日期也不太好看。我希望能够将此日期转换为本地语言和自定义格式。您可以在答案中粘贴您的codepen链接。或者，如果您有任何其他好的例子，那也非常受欢迎！

HTML：

<canvas id="myChart" width="auto" height="100"></canvas>

JavaScript的：

var ctx = document.getElementById("myChart").getContext("2d");

var myLineChart = new Chart(ctx, {
    type: "line",
    data: {
        labels: [
            // x-axis array containing dates as String in YYYY-MM-DD format
            // e.g. 2009-04-11 (April 11, 2009)
        ],
        datasets: [
            {
                label: "time",
                backgroundColor: "transparent",
                borderColor: "#0088d4",
                data: [
                    // y-axis array containing times as int in one hundredth of a second
                    // e.g.: 15170 (2 minutes, 31 seconds and 70 hundreth of a second)
                ]
            }
        ]
    },
    options: {
        elements: {
            line: {
                tension: 0
            }
        },
        scales: {
            yAxes: [
                {
                    ticks: {
                        stepSize: 1,
                        callback: function(tickValue, index, ticks) {
                            if (!(index % parseInt(ticks.length / 5))) {
                                return tickValue;
                            }
                        }
                    }
                }
            ]
        }
    }
});

Answer 1

你可以创建一个duration并使用moment-duration-format插件。

由于您的输入是秒，您可以使用moment.duration：

Moment.js也有持续时间对象。如果将时刻定义为单个时间点，则将持续时间定义为时间长度。

您可以使用moment.duration(tickValue/100, 'seconds')为您的值创建持续时间。然后你可以使用moment-duration-format将60秒变换为像01:00.00这样的字符串

这是Moment.js JavaScript日期库的插件，用于向Moment Durations添加全面的格式。

使用时刻持续时间格式，您可以将format()方法用于持续时间对象。在你的情况下，你可以使用'mm:ss.SS'代币，mm代表几分钟，ss代表秒，SS代表毫秒。

既然你想要输出像qazxsw poi而不是qazxsw poi，你可以使用00:23.80选项。

因此，要更改qazxsw poi轴的显示值，您的回调可能如下所示：

23.80

---

关于日期的评论后更新：您可以使用时刻{ trim: false }将y转换为

callback: function(tickValue, index, ticks) {
  if (!(index % parseInt(ticks.length / 5))) {
    return moment.duration(tickValue/100, 's').format('mm:ss.SS');
  }
}

：

2011-04-11

您只需使用april 14, 2011解析您的输入（因为它匹配已知的ISO 8601格式），然后使用format()使用moment('2011-04-11').format('MMMM DD, YYYY'); 作为月份名称，使用moment(String)作为当月日期和format()作为年份。

---

MMMM我更新的codepen具有以下代码段的相同代码：

DD

YYYY

Here