时间戳

首页 > 解决方案 > 如何在 Charts.js 3.x 中将“hh:mm:ss”字符串解析为时间

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

问题描述

我想使用 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 中完成的，并且在我的示例中不再有效。
使用 Chart.js 从时间字符串中绘制单圈时间 Xaxes中的
Chartjs 时间

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

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

非常感谢您的帮助。

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>

标签： javascripthtmlchart.js

解决方案

在 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>

推荐阅读