javascript - 如何在 Charts.js 3.x 中将 "hh:mm:ss"字符串解析为时间

Question

我想使用 Charts.js 创建时间轴。 为此，我以小时:分钟:秒的格式导入数据，如“00:00:10”。
当使用 Charts.js 2.0 时，可以设置解析器，允许将时间值作为字符串导入。

但在升级到 Charts.js 3.2.1 之后，解析器选项似乎不再有效。
在文档中指出，仍然可以像以前一样使用解析器。 https://www.chartjs.org/docs/latest/axes/cartesian/time.html#parser

我找到了多个解释如何执行此操作的论坛线程，但它们是在 Charts.js 2.x 中完成的，不再适用于我的示例。
Plot lap times with Chart.js from time strings
Chartjs time in Xaxes

这是我的代码。
第一个示例无法运行，因为脚本解析器失败。在第二个示例中，您可以看到完全相同的代码，但没有正在运行的解析器。

那么我如何解析我的字符串数据，以便它的格式正确并显示时间线？

非常感谢您的帮助。

var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [
            {
            label: "Switched",
            data: [{x:"00:00:07", y: 0}, {x:"00:00:14", y: 0}, {x:"00:05:24", y: 0}],
            showLine: false,
            fill: false,
            tooltip: "Player switched",
            borderColor: "#16a085",
            backgroundColor: "#16a085"
        }
    ]},
    options: {
        responsive: true,
        scales: {
        x: {
                type: 'time',
                time: {
                    parser: 'HH:mm:ss',
                    unit: "seconds",
                    tooltipFormat: 'HH:mm:ss',
                    displayFormats: {
                        'seconds': "HH:mm:ss"
                    },
                    unitStepSize: 30
                }
            },
            y: {
                min: -1,
                max: 13,
                stepSize: 1,
            }
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>

<canvas id="chart" height= "80px" style="background-color: rgb(50, 50, 50);"></canvas>

var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [
            {
            label: "Switched",
            data: [{x:"00:00:07", y: 0}, {x:"00:00:14", y: 0}, {x:"00:05:24", y: 0}],
            showLine: false,
            fill: false,
            tooltip: "Player switched",
            borderColor: "#16a085",
            backgroundColor: "#16a085"
        }
    ]},
    options: {
        responsive: true,
        scales: {
        x: {},
            y: {
                min: -1,
                max: 13,
                stepSize: 1,
            }
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>

<canvas id="chart" height= "80px" style="background-color: rgb(50, 50, 50);"></canvas>

Answer 1

在 chart.js v3 中，他们删除了 moment 和适配器，因此您需要将两者都添加到您的脚本中，它应该可以工作

例子:

var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [
            {
            label: "Switched",
            data: [{x:"00:00:07", y: 0}, {x:"00:00:14", y: 0}, {x:"00:05:24", y: 0}],
            showLine: false,
            fill: false,
            tooltip: "Player switched",
            borderColor: "#16a085",
            backgroundColor: "#16a085"
        }
    ]},
    options: {
        responsive: true,
        scales: {
        x: {
                type: 'time',
                time: {
                    parser: 'HH:mm:ss',
                    unit: "seconds",
                    tooltipFormat: 'HH:mm:ss',
                    displayFormats: {
                        'seconds': "HH:mm:ss"
                    },
                    unitStepSize: 30
                }
            },
            y: {
                min: -1,
                max: 13,
                stepSize: 1,
            }
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@0.1.1"></script>

<canvas id="chart" height= "80px" style="background-color: rgb(50, 50, 50);"></canvas>